Vue3.0 小知识点
响应式数据的声明
1.reactive
reactive 用于为对象添加响应式状态。接收一个js对象作为参数,返回一个具有响应式状态的副本。
-
获取数据值的时候直接获取,不需要加.value
-
参数只能传入对象类型
import { reactive } from 'vue' // 响应式状态 const state = reactive({ count: 0 }) // 打印count的值 console.log(state.count)
// 页面显示 <div>{{state.count}}</div> //直接导出state return { state }
2.ref
ref 用于为数据添加响应式状态。由于reactive只能传入对象类型的参数,而对于基本数据类型要添加响应式状态就只能用ref了,同样返回一个具有响应式状态的副本。
-
获取数据值的时候需要加.value。可以理解为ref是通过reactive包装了一层具有value属性的对象实现的
const count = ref(0) //等价于 const count = reactive({ value: 0 }) // 打印count的值 console.log(count.value)
-
在模板中不需要加.value, 因为会自动添加.value
<div>{{count}}</div>
-
参数可以传递任意数据类型,传递对象类型时也能保持深度响应式,所以适用性更广。
-
vue 3.0 setup里定义数据时推荐优先使用ref,方便逻辑拆分和业务解耦。
3.toRefs
toRefs()函数可以将reactive()创建出来的响应式对象,转换为普通对象,只不过这个对象上的每个属性节点,都是ref()类型的响应式数据
// 响应式状态 const state = reactive({ count: 0, num: 2 }) const msg = reactive({ title: '测试', })
// 返回值 return toRefs(state) // 基本约等于 return { count: { value: 0 }, num: { value: 0 } } // 模板内显示count,自动添加.value <div>{{count}}</div>
return { msg, ...toRefs(state) } // 基本约等于 return { msg, count: { value: 0 }, num: { value: 0 } } // 模板内显示count ,自动添加.value <div>{{count}}</div> // 模板内显示msg的title <div>{{msg.title}}</div>
4.es6之扩展运算符 三个点(...)
对象中的扩展运算符(...) 用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中
let bar = { a: 1, b: 2 }; let baz = { ...bar }; // { a: 1, b: 2 } // 等价于 let baz = Object.assign({}, bar); // { a: 1, b: 2 }
Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。(如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性)。