热门

最新

红包

立Flag

投票

同城

发布
caijilxy
别离三千净此生
4 年前
truecaijilxy

reactive
只能定义对象类型的响应式数据 基本类型要用ref
reactive定义的响应式是深层次的 体现在就算你多层嵌套 都能把其中所有的数据变成响应式的
内部是基于Proxy来进行数据劫持操作

首先引入
import { reactive } from 'vue'

let job =reactive ( {
type:'工程师'
salary:'10k'
} )

修改值
job.type='设计师'

----------------------
也可以用于定义数组的响应式

let hobby =reactive(['抽烟','喝酒','烫头' ])

修改值
hobby[0]='学习'
-----------------------
基本类型写在reactive的方法

把他写入一个对象里
let person =reactive{
name:'张三'，
age:'18',
}
好处:
1.不用写name.value 写person.name就好
2.return的时候也不用返回name，age这样一个一个的
只需要返回person就行


这样引用的时候 就是 person.name 不需要value 但是还是较长较麻烦
后续会解决 目前不会搞


注：Proxy和defineProperty 数据劫持的区别
目前已知： 在数组的响应式中，defineProperty只能通过数组的八个函数来操作数组触发响应式
而 Proxy直接更改数组就能触发响应式
1
1
打赏
  • 复制链接
  • 举报
下一条：
在vue文件中使用首先需要引入ref文件import {ref} from 'vue'let name =ref('张三')let age = ref(18) //让这些数据变成响应式 把数据丢给ref生成一个引用对象修改数据用 name.value='李四' age.value=20但是在模板里 也就是html里不需要.value <h1>{{ name }}</h1>-----------处理对象类型（就是一个类里多个数据）-------------------ref把job 变成了名为Proxy的代理对象 let job = ref({ type:'工程师'， salary:'10k'})修改数据用job.value.type='设计师' //无需value注：const对象是可以修改里边的属性的 但是不能在其中添加子集属性