vue3 vite ts day2

虚拟dom diff 算法的了解

diff 算法  源码的了解

简单易懂的图

参考文章   

学习Vue3 第五章（Vue核心虚拟Dom和 diff 算法）_学习vue3 第五章 (vue核心虚拟dom-CSDN博客

如需了解更多请去原作者下看，讲的真的很细。

ref reactive 

vue2 是通过 export default data里面 return 的数据才是响应式数据是可以通过改变数据来实时反映到页面上的，而 vue3 的 ref  和  reactive 定义的数据才是响应式数据。

ref 全家桶

源码展示利于理解

<template>

<div @click="nameChange">
  {{ name }}
</div>


<!-- 点击实时改变 -->
<div @click="refnameChange">
  {{ refname }}
</div>


<div @click="funshallowRefname">
  {{ shallowRefname }}
</div>


<div ref="divdome" @click="getdome">
  我是div
</div>


</template>
<script setup lang="ts">
import { ref, isRef, shallowRef, triggerRef, customRef } from "vue";



//ref 可以用来获取dome 对象  常用
const divdome = ref<HTMLDivElement>()  //ts 
function getdome() {  
  //可以通过 dome 对象value 里面的方法 获取对象的信息
  console.log(divdome,'dome元素');
  console.log(divdome.value?.clientHeight,'dome元素的高度');  //24   有的元素值可能读不到 ?.连续操作链，不会报错
}


//customRef 自定义ref  具体可以自行搜索



// isRef 判断是否是ref
 //false
// console.log(isRef(name));
//true
// console.log(isRef(refname));






//shallowRef   //浅层的响应  不能和 ref 写一块，值会被影响到

// triggerRef   会强行更新识图 

const shallowRefname =shallowRef({
  n:'变3'
}) 

function funshallowRefname() { 
  shallowRefname.value.n = '改变3'  //不会改变识图

  triggerRef(shallowRefname) //会强行更新识图 


  // shallowRefname.value = {  //会改变识图  本应不因该更新识图的，更新了
  //     n:'改变3'
  // } 

  console.log(shallowRefname);  //打印的数据已经改变了
  //shallowRef  
}



const name = {
  n:'变'
}

function nameChange() { 
  name.n = '改变'
  console.log(name);
  //输出结果是 {value: '改变'} 但是页面没有更新
}




const refname =ref({
  n:'变2'
}) 


function refnameChange() { 
  refname.value.n = '改变2'
  console.log(refname);
  //通过ref包括后数据变成响应式进行相应的修改会实时响应到页面上,必须通过 .value  才可以改变值
}







</script>
<style>

</style>

效果图

知识拓展

?. 连选链操作  

?. 可选链操作符
?. 是可选链操作符，常用于访问引用类型具有不确定性的内部数据时，比如要访问一个对象中的数组，不确定数组一定有数据就可以使用 ? 取读取它的 length 属性，如果对象没有这个属性也仅会返回 undefined 而不会报错，这样可以有效规避“undefuned上没有 length 属性”的报错！

代码示例：

let data = {name: 'zs'}
console.log(data.list.length)        // 代码会报错！！！！
 
let data = {name: 'zs'}
console.log(data.list?.length)       // 返回 undefined 而不会报错

?? 和 ||
?? 和 || 运算符都可以用于设置“默认值/备用值”的情况，但二者具有些微差别：

?? 运算符仅有在左侧数据为 undefined 或 null 时才会取右侧的值，所以左侧数据为 0 / false 时不会取右侧数据，仍旧取左侧的 0 / false

代码示例：

let a = null
console.log(a ?? '空')        // 空
 
let a = undefined
console.log(a ?? '空')        // 空
 
let a = 0
console.log(a ?? '空')        // 0
 
let a = false
console.log(a ?? '空')        // false

|| 运算符是只要左侧数据不为真就会取右侧的数据，所以左侧数据为 0 / false 时也会取右侧数据

代码示例：

let a = 0
console.log(false || '空')        // 空
 
let a = false
console.log(false || '空')        // 空
 
let a = null
console.log(false || '空')        // 空
 
let a = undefined
console.log(false || '空')        // 空

参考文章

? 可选链操作符以及 ?? 与 || 的区别_es6中??与|| 的区别-CSDN博客