登陆

【Vue3】笔记

admin 2022-11-24 12人围观 ,发现0个评论

一、ref、reactive、toRefs

ref 简单数据类型

1. 将传入参数的值包装为一个带 value 属性的对象,将基本数据转换引用数据类型 2. 模板上使用的时候会自动解析,将 value 去掉,直接使用对应的属性就行了 复制代码

reactive 引用数据类型

1. 将对象里面的值进行解构以后会失去响应式 2.stringnumberBoolean 无效,只对对象类型生效 复制代码

toRefs 使解构后的数据重新获取响应式

1. 一般使用 setup 函数的写法,如果数据层级复杂的时候,可以使用 ...toRefs(值) 进行解构,直接解构的话会让数据失去响应式 复制代码

二、watch 侦听器

watch

// 1. 监听简单数据类型 watch(meg, (newValue, oldValue) => {   console.log( newValue, oldValue) }) ​ // 2. 监听对象的某个属性值 // 响应式对象的 getter 函数,只有在返回不同的对象时,才会触发回调,使用 ()=> obj.name 每次返回一个新对象 watch(   () => obj.name,   (newValue, oldValue) => {     // 仅当 obj.name 被替换时触发,单独修改里面的属性不会触发     console.log( newValue, oldValue)   } ) ​ // 3. 不被替换也触发的话 // 深度侦听需要遍历被侦听对象中的所有嵌套的属性,当用于大型数据结构时,开销很大。因此请只在必要时才使用它,并且要留意性能。 watch(   () => obj.name,   (newValue, oldValue) => {     // 注意:`newValue` 此处和 `oldValue` 是相等的     // *除非* state.someObject 被整个替换了,单独修改里面的属性不会触发     console.log( newValue, oldValue)   },   // 添加 deep 深度监听,修改后触发,immediate 页面一加载就触发   {deep:true , immediate: true } ) 复制代码

watchEffect

// 不需要指定监听的属性,组件初始化的时候会执行一次,自动收集函数中使用的响应式属性,当里面的值发生变化就会触发函数 // 不能获取旧值,能拿到新的值 watchEffect(() => {   // obj.name 整个被替换掉才触发,单独修改里面的属性不会触发   console.log(obj.name) }) 复制代码

区别

1. watch 需要指定监听的属性,watchEffect 会自动收集回调中使用的属性,代码简洁 2. 当不需要拿到旧值的时候,可以使用 watchEffect。 复制代码

三、setup 中的参数

setup(props, context) {     // 父组件传递的参数,存储在 props 对象中     console.log(props)     // context 有 attrs emit expose slots     // attrs 接收传递的属性      // emit 自定义事件,将子组件的数据发送父组件,进行接收      // expose 可以将当前组件方法、属性暴露出去,再通过 ref 获取对应的值,当使用了 h 渲染函数时,还想获取 setup 的指定时可以通过该方法     // slots      console.log(props) }, 复制代码
请发表您的评论
请关注微信公众号
微信二维码
不容错过
Powered By Z-BlogPHP