高端html5网站建设织梦模板,电商模板网站,融资网站开发,新东方烹饪学校目录1.什么是响应式2. 选项式 API 的响应式数据3.组合式 API 的响应式数据3.1 reactive() 函数3.2 toref() 函数3.3 toRefs() 函数3.4ref() 函数总结1.什么是响应式 这个术语在今天的各种编程讨论中经常出现#xff0c;但人们说它的时候究竟是想表达什么意思呢#xff1f;本质…
目录1.什么是响应式2. 选项式 API 的响应式数据3.组合式 API 的响应式数据3.1 reactive() 函数3.2 toref() 函数3.3 toRefs() 函数3.4ref() 函数总结1.什么是响应式 这个术语在今天的各种编程讨论中经常出现但人们说它的时候究竟是想表达什么意思呢本质上响应性是一种可以使我们声明式地处理变化的编程范式。一个经常被拿来当作典型例子的用例即是 Excel 表格 -AB011223这里单元格 A2 中的值是通过公式 A0 A1 来定义的 (你可以在 A2 上点击来查看或编辑该公式)因此最终得到的值为 3正如所料。但如果你试着更改 A0 或 A1你会注意到 A2 也随即自动更新了。 而 JavaScript 默认并不是这样的。如果我们用 JavaScript 写类似的逻辑 let A0 1
let A1 2
let A2 A0 A1console.log(A2) // 3A0 2
console.log(A2) // 仍然是 3当我们更改 A0 后A2 不会自动更新。 那么我们如何在 JavaScript 中做到这一点呢首先为了能重新运行计算的代码来更新 A2我们需要将其包装为一个函数 let A2function update() {A2 A0 A1
}然后我们需要定义几个术语 这个 update() 函数会产生一个副作用或者就简称为作用 (effect)因为它会更改程序里的状态。A0 和 A1 被视为这个作用的依赖 (dependency)因为它们的值被用来执行这个作用。因此这次作用也可以说是一个它依赖的订阅者 (subscriber)。 我们需要一个魔法函数能够在 A0 或 A1 (这两个依赖) 变化时调用 update() (产生作用)。 whenDepsChange(update)这个 whenDepsChange() 函数有如下的任务 当一个变量被读取时进行追踪。例如我们执行了表达式 A0 A1 的计算则 A0 和 A1 都被读取到了。如果一个变量在当前运行的副作用中被读取了就将该副作用设为此变量的一个订阅者。例如由于 A0 和 A1 在 update() 执行时被访问到了则 update() 需要在第一次调用之后成为 A0 和 A1 的订阅者。探测一个变量的变化。例如当我们给 A0 赋了一个新的值后应该通知其所有订阅了的副作用重新执行。
2. 选项式 API 的响应式数据
● 可用data选项来声明组件的响应式状态该data选项的值应为返回一个对象的函数
● data函数返回对象的所有顶层属性都会被代理到组件实例即方法和生命周期钩子中的 this上scriptexport default {// data 选项的值应该是一个函数返回的对象data: () ({account: Abc,student: {name: Jack,age: 30}}),methods: {changeAccount() {// 取出数据源可通过 this当前组件得实例对象 关键字获取this.account },changeStudentAge() {this.student.age }}}
/scripttemplateh1账号{{ account }}/h1button clickchangeAccount点我更改账号/buttonhrh1学生{{ student }}/h1button clickchangeStudentAge点我更改学生年龄/button/template3.组合式 API 的响应式数据
如果在组合式 API 中直接声明普通变量的数据源他们并不具备响应式数据script setup// 普通的变量不具备响应式let account 123function changeAccount() {account 1console.log(account)}// 普通类型的对象不具备响应式let emp {salary: 7000,name: Annie}function changeEmpSalary() {emp.salary 100console.log(emp)}/scripttemplateh1账号{{ account }}/h1button clickchangeAccount点我更改账号/buttonhrh1员工{{ emp }}/h1button clickchangeEmpSalary点我更改薪资/button/template3.1 reactive() 函数
reactive()函数只对对象类型有效对象、数组、Map、Set对string、number和 boolean这样的原始类型无效
reactive接收一个普通对象然后返回该普通对象的响应式代理● 普通对象返回一个proxy对象响应式转换是深层的对影响对象内部所有嵌套的属性● 用user.name“new name”来修改值● 内部基于proxy实现● 获取数据值的时候直接获取不需要加.value● 参数只能传入对象类型script setup// 引入 reactive 函数import { reactive } from vue// reactive 对原始类型是无效不具备响应式let account reactive(Abc)function changeAccount() {account console.log(account)}// reactive 对象数据源具有响应式let emp reactive({name: Jack,salary: 7000})function changeEmpSalary() {emp.salary 1console.log(emp)}/scripttemplatehrh1账号{{ account }}/h1button clickchangeAccount点我更改账号/buttonhrh1员工{{ emp }}/h1button clickchangeEmpSalary点我更改员工薪资/button/template3.2 toref() 函数 1.toRef 用于为源响应式对象上的属性新建一个ref从而保持对其源对象属性的响应式连接。接收两个参数源响应式对象和属性名返回一个ref数据。例如使用父组件传递的props数据时要引用props的某个属性且要保持响应式连接时就很有用。 2. Template中直接获取值js中需要加.value获取数据值 3. toRef后的ref数据不是原始数据的拷贝而是引用改变结果数据的值也会同时改变原始数据 4. 不会触发UI界面的更新 3.3 toRefs() 函数 ● toRefs 用于将响应式对象转换为普通对象但是其中的每个属性都会指向原始对象相应属性的ref也就是依然保持响应式。常用于es6的解构赋值操作因为在对一个响应式对象直接解构时解构后的数据将不再有响应式而使用toRefs可以方便解决这一问题。 ● 获取数据值的时候需要加.value ● toRefs后的ref数据不是原始数据的拷贝而是引用改变结果数据的值也会同时改变原始数据 ● 作用其实和 toRef 类似只不过 toRef 是一个个手动赋值而 toRefs 是自动赋值 3.4ref() 函数
● 使用ref()方法我们可以创建任何类型的响应式数据获取时需要通过.value来进行获取
● 当值为对象类型时会用reactive()自动转换它的 .value
● ref 接受一个内部值并返回一个响应式可变的ref对象
任意类型返回一个ref对象
用num.value***来修改值
获取数据值的时候需要加.value。可以理解为ref是通过reactive包装了一层具有value属性的对象实现的
参数可以传递任意数据类型传递对象类型时也能保持深度响应式所以适用性更广
setup中定义数据时推荐优先使用 ref方便逻辑拆分和业务解耦
template中使用ref值不用通过value获取导出后已默认做了一个解构js中使用ref必须通过.value获取
ref获取元素script setup// 引入 ref 函数来声明响应式对象import { ref } from vue// 使用 ref 函数来声明原始类型的数据源具备响应式let account ref(Abc)// 更改账号控制台查看最新值function changeAccount() {// 通过 ref 函数声明的响应式数据需要使用 .value 来获取数据的值account.value console.log(account)}// 使用 ref 函数来声明对象类型的数据源具备响应式let emp ref({salary: 7000,name: Jack})// 更改员工薪资控制台查看最新值function changeEmpSalary() {// 通过 ref 函数声明的响应式数据需要使用 .value 来获取数据的值emp.value.salary 100console.log(emp)}
/scripttemplateh1账号{{ account }}/h1button clickchangeAccount点我更改账号/buttonhrh1员工{{ emp }}/h1button clickchangeEmpSalary点我更改员工薪资/button/template总结
以上就是Vue3.0 的响应式带数据。希望本篇文章能够帮助到你不懂得可以评论区或者私信问我我也会一 一解答。谢谢观看 我的其他文章:https://blog.csdn.net/m0_60970928?typeblog
