VUE3-基础6

本节：

一、使用文档碎片，减少dom操作，每一次： 被插入对象名.appendChild(插入对象名); 都是一次dom操作，很浪费内存。创建文档碎片，就可以把整合那些循环的内容变成一个变量，一次性的放到变量里面，就节约了性能

二.事件修饰符：加click.stop 就可以阻止事件冒泡，只执行里面 的div，不执行外面的div，只执行当前的div，不再往父级div执行

还有click.capture捕获模式，修改事件的先后面处理顺序

Click.self当点击函数嵌套的时候，只有点击当前元素的时候，才会执行当前元素

Click.prevent 可以阻止比如a标签这种加了href点击了就会自动跳转的功能，加了Prevent就阻止了自动跳转的功能，可以进行一个自定义的方法设置。阻止默认行为

Click.once 让点击事件只能点击一次

Scroll.passive 可以提高滚动事件的修饰符

三、 点击一个内容的时候，调用两个方法，只要 写方法名()  逗号隔开就可以了

 四、用vue代理的功能，通过挂载的名字，vm.变量名，可以之直接访问到数据

 

如果在普通的方法里面，this指向的就是当前I定义好的变量内容，但是在箭头函数的方法里面，this指向的就是当前作用域的内容。如果当前没有作用域，就是指向windos里面的内容。Vue3就没有this的烦恼，因为vue3没有this

五、直接在div里面加 ｛｛方法名（）｝｝ 不要任何操作，也会在初始化的时候，调用方法

Computed计算属性有一个缓存的作用，就是如果他要计算的内容没有发生变化，他就不会重新计算，所以计算属性写异步请求不是很方便；；方法是如果重新页面重新刷新或者调用了，就会重新计算。Watch可以实现异步请求，因为只要一有变化，他就会重新调用。但是使用computed 和watch 推荐使用computed，因为更加简洁；computed 和methods，在不要数据因为页面重新渲染，其他无关数据改变，就重新计算，节约性能吧

六、

• Vue2的ref是类似id的标识符，vue3ref是一种函数

把普通的数据变成响应式可以变化修改的数据，

所以定义数组是  let name = ref(“天天”)   用ref()包裹起来，

使用name.value =“楚天”才可以修改数据，因为vue3变量的值正在是存在protype原型里面的value的，所以要调用value才可以获取值。

如果是获取数组的值，要 ：数组名.value.属性名  ，因为vue3里的内容都是放在原型的value里面的

 变量是内容是放在refimp里面的，数组是放在 proxy代理里面的，请求求助了vue3中的新函数，reactive,所以数组是用reactive包含的

 

 在reactive包裹的，就直接取值就可以了，因为它里面用了代理，就不用从value取值了

七、通过事件监听，获取点击的鼠标位置，通过生命周期摧毁后，功能隐藏，就移除监听事件

 自定义hooks 很多函数，就是把函数功能都单独写出来，是一种函数复用功能，到时候要用的时候，可以直接引入。

 函数里面要return返回内容，不然别人引入了，却调用不到你的内容，引入接受的页面，也要定义一个新的变量接收函数

 直接引入很多方法，让代码更简洁

八、

• toRef就是创建一个ref对象

toRef绑定数组，定义新的变量接收，然后toRef（绑定数组名 ）

直接Ref(对象)是把值重新打包了一个新的地址空间，不是影响到原来的地址空间，使用toRef，引用了原来的地址空间，所以修改的是原来的地址内容。toRef修改的数组里面对应的数组，是（数组名，具体属性）一个一个取修改，toRefs是修改整个数组的，不用一个一个改，直接遍历了

 

 ...toRef（数组）torefs返回的是数组 object静态数组，return本身也是一个数组，所以要在数组里面使用数组要先解构，不然会有语法错误。

torefs，页面渲染可以直接使用属性名就调用

ShallowReactive只执行数组数据第一层的响应式，再往 下几层的不执行，，shallowRef只执行变量的响应式，不执行对象数组的响应式

这里是object不是响应式，不能改数据，

proxy这是调用了vue3的函数，

才可以执行响应式

 

 

数组用：变量=readonly(对象)，重新包裹定义一层，这个对象就改不了，变量名= shallowReadnoly(对象)包裹一层，就浅层的内容不能改，数组深层数据可以改

在接收别人数据，然后别人不让改的时候，就可以用readonly了。readonly深层次浅层次都不让读，shallowReadonly，浅层次不让读，深层次可以读。  reactive包裹的数据是响应式数据，不用reactive就是静态数据

 

 九、

• toRaw 把reactive生成的响应式对象，转换成原始的object对象。markRaw把对象标记为object对象 ，raw是生的。运用在一些值是第三方库的值，不能更改的时候；当渲染数据只是用来展示的，不能改变的时候。

Const   变量名= toRaw（数组） ，toRaw,就是把响应式的，请求了vue3函数的proxy的动态数据，还原成object数据，静态的不可变的数组

这里是点击加了一个数组进person数组里面，因为调用person时候已经解构了，所以要再返回一次就可以了

Let a = markRaw(对象),就是把数据彻底变成obeject形式的，彻底静态，不能改数据；

 十、

• provide 提供（谁给谁提供） 和inject 注入（谁给谁注入）

实现祖孙组件通信，祖孙组件也叫跨级组件，因为顺序是，祖---父--孙，直接祖和孙通信，

在祖 通过provide提供，然后在孙通过inject注入使用

祖组件想给孙组件提供数据，使用provide() ,给自己的后代组件（子子孙孙都能用）提供数据；

孙组件通过import  {inject} from “vue” ,然后调用let a =  inject(想获取的数据)，可以获取数据

 

如果是父子组件通信，要用pops

十一、

• 响应式数据判断

Readonly虽然是只读的数据，但是返回的依旧是proxy动态的对象，ref使用的是object的对象