组件中所用到的:数据、方法等等,均要配置在setup中
setup函数的两种返回值:
若返回一个对象,则对象中的属性、方法, 在模板中均可以直接使用。(重点注意)
若返回一个渲染函数:则可以自定义渲染内容。
注意:
vue2可以读取vue3里面的数据
如果 vue2和vue3冲突,会用vue3的,所以
尽量不要与Vue2.x配置混用
setup不能是一个async函数,因为返回值不再是return的对象, promise,
模板看不到return对象中的属性
可以定义一个响应式的数据
语法: const xxx = ref(initValue)
xxx.value
<div>{{xxx}}</div>
注:
Object.defineProperty()
的get
与set
完成的一个对象类型的响应式数据(基本类型不要用它,要用ref
函数)
const 代理对象= reactive(源对象)
接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象)
vue2.x的响应式
对象类型:通过Object.defineProperty()
对属性的读取、修改进行拦截(数据劫持)
数组类型:通过重写更新数组的一系列方法来实现拦截
Object.defineProperty(data, 'count', { get () {}, set () {} })
但是存在一些问题: 新增属性、删除属性, 界面不会更新; 直接通过下标修改数组, 界面不会自动更新。
Vue3.0的响应式
new Proxy(data, { // 拦截读取属性值 get (target, prop) { return Reflect.get(target, prop) }, // 拦截设置属性值或添加新属性 set (target, prop, value) { return Reflect.set(target, prop, value) }, // 拦截删除属性 deleteProperty (target, prop) { return Reflect.deleteProperty(target, prop) } }) proxy.name = 'tom'
从定义数据角度对比:
reactive
转为代理对象从原理角度对比:
Object.defineProperty()
的get
与set
来实现响应式从使用角度对比:
.value
,读取数据时模板中直接读取不需要.value
.value