在vue3中使用生命周期需要先引入然后在setup里面使用 vue3在定义变量以及方法在setup里面必须return =====setup执行时机===== beforeCreate :表示组件刚刚被创建出来,组建的data和methods还没有初始化好; setup created:表示组件刚刚被创建出来,组建的data和methods已经初始化好;
*****setup注意点 由于在执行setup还没有执行created生命周期所以是无法使用data和methods所以为了避免我们错误的使用,他直接将setup函数中的this修改成了undefined setup函数是同步的;
=====================什么是reactive?=================是vue3中提供的实现响应式数据的方法通过Es6的Proxy实现的 在vue2中响应式数据是通过defineProperty实现的 注意点: 参数必须是对象/数组 由于在创建响应式数据的传递不是一个对象/数组所以数据不会更新到视图页面上 直接修改在之前的不会改变,需要重新赋值 例如更新日期;
========================ref======================ref跟reactive一样,都是用来实现响应式数据的方法 ref底层的本质其实还是reactive 注意点: ref创建的值在template中不用通过value获取 在js中ref的值必须通过value获取
============ref跟reactive的区别==========如果在template使用的是ref类型,那么Vue会自动帮我们添加.value 如果在templete使用的是reactive类型,那么Vue不会自动帮我们添加.value Vue是如何决定需要添加.value的,Vue在解析之前,会自动判断这个数据是否是ref类型若是自动添加否则不会自动添加;
============Vue如何判断是否是ref类型===========是通过当前数据的__v_ref来判断的,如果有这个私有属性,并且取值为true,那么就代表是一个ref类型的数据; 校验数据是ref类型还是reactive类型 使用:isRef isReactive
============递归监听==============默认情况下,无论是通过ref还是reactive都是递归监听 缺点:数据量大的话,非常消耗性能。
============非递归监听============shallowRef / shallowReactive
如果是通过shallowRef创建数据那么Vue监听的是.value的变化,并不是第一层的
如何触发非递归监听:
如果是shallowRef类型数据,可以通过triggerRef
应用场景:
只有在需要监听的数据量比较大的时候,我们才使用shallowRef或者shallowReactive
shallowRef本质:也是通过shallowReactive({value:{})
================toRow================ 获取ref以及reactive数据类型特点每次修改都会更新我们的视图页面非常消耗我们的性能,如果有意部门不需要更新我们可以通过toRaw ================ref获取元素========= Vue3中的方式:生命周期中调用