vue3中toRef和toRefs的情况(系列九)
Vue3 系列 情况
2023-09-11 14:20:08 时间
ref和toRef区别: ref->复制, 修改响应式数据不会影响原始数据 toRef->引用, 修改响应式数据会影响原始数据 ref->数据发生改变, 界面就会自动更新 toRef->数据发生改变, 界面也不会自动更新 toRef应用场景: 如果想让响应式数据和以前的数据关联起来, 并且更新响应式数据之后还不想更新UI, 那么就可以使用toRef
1.toRef 创建一个ref类型数据, 并和以前的数据关联 2.toRefs 批量创建ref类型数据, 并和以前数据关联 3.toRef和ref区别 ref-创建出来的数据和以前无关(复制) toRef-创建出来的数据和以前的有关(引用) ref-数据变化会自动更新界面 toRef-数据变化不会自动更新界面
ref类型数据代码
<template> <div> <p>{{state}}</p> <button @click="myFn">按钮</button> </div> </template> <script> import {ref} from 'vue'; export default { name: 'App', setup() { let obj = {name:'lnj'}; let state = ref(obj.name); function myFn() { state.value = 'zs'; console.log(obj); //{name:'lnj'} console.log(state); // {name:'zs'} } return {state, myFn} } } </script> <style> </style>
通过发现,如果利用ref将某一个对象中的属性变成响应式的数据,
我们修改响应式的数据是不会影响到原始数据的obj !== state, 会触发页面更新
通过toRef
<template> <div> <p>{{state}}</p> <button @click="myFn">按钮</button> </div> </template> <script> /* 1.toRef 创建一个ref类型数据, 并和以前的数据关联 2.toRefs 批量创建ref类型数据, 并和以前数据关联 3.toRef和ref区别 ref-创建出来的数据和以前无关(复制) toRef-创建出来的数据和以前的有关(引用) ref-数据变化会自动更新界面 toRef-数据变化不会自动更新界面 * */ import {ref, toRef} from 'vue'; export default { name: 'App', setup() { let obj = {name:'lnj'}; /* ref(obj.name) -> ref(lnj) -> reactive({value:lnj}) * */ // ref->复制 // let state = ref(obj.name); // toRef->引用 /* ref和toRef区别: ref->复制, 修改响应式数据不会影响以前的数据 toRef->引用, 修改响应式数据会影响以前的数据 ref->数据发生改变, 界面就会自动更新 toRef->数据发生改变, 界面也不会自动更新 toRef应用场景: 如果想让响应式数据和以前的数据关联起来, 并且更新响应式数据之后还不想更新UI, 那么就可以使用toRef * */ let state = toRef(obj, 'name'); function myFn() { state.value = 'zs'; /* 结论: 如果利用ref将某一个对象中的属性变成响应式的数据 我们修改响应式的数据是不会影响到原始数据的obj !== state * */ /* 结论: 如果利用toRef将某一个对象中的属性变成响应式的数据 我们修改响应式的数据是会影响到原始数据的 但是如果响应式的数据是通过toRef创建的, 那么修改了数据并不会触发UI界面的更新 * */ console.log(obj); //{name:'zs'} console.log(state); //{name:'zs'} } return {state, myFn} } } </script> <style> </style>
toRefs
<template> <div> <p>{{state}}</p> <button @click="myFn">按钮</button> </div> </template> <script> /* 1.toRef 创建一个ref类型数据, 并和以前的数据关联 2.toRefs 批量创建ref类型数据, 并和以前数据关联 3.toRef和ref区别 ref-创建出来的数据和以前无关(复制) toRef-创建出来的数据和以前的有关(引用) ref-数据变化会自动更新界面 toRef-数据变化不会自动更新界面 * */ import {ref, toRef, toRefs} from 'vue'; export default { name: 'App', setup() { let obj = {name:'lnj', age:18}; // let name = toRef(obj, 'name'); // let age = toRef(obj, 'age'); let state = toRefs(obj); function myFn() { // name.value = 'zs'; // age.value = 666; state.name.value = 'zs'; state.age.value = 666; console.log(obj); //{name:'zs', age:666} console.log(state); //{name:'zs', age:666} // console.log(name); // console.log(age); } return {state, myFn} } } </script> <style> </style>
相关文章
- vue3.x:用webpack-bundle-analyzer分析chunk文件过大的原因(vue.js 3.0.5/@vue/cli 4.5.13)
- 用Vue3构建企业级前端应用,TS能让你更轻松点
- vue3 - .eslintignore 配置忽略指定文件或者文件夹的eslint检查报错
- vue3 - 关闭eslint提示参数必须定义类型
- 如何在vue3获取 DOM 元素
- Vue3学习笔记(六)—— 作业
- 从0搭建Vue3组件库(一): 开篇
- vue3 hooks 组件封装
- Vue3编译优化
- Vue3 对比Vue2,你找到哪些变化?
- vue3 ref 和reactive的区别
- Vue3带来了什么
- Vue3 reactive / customRef 快速理解掌握
- Vue3 组件定义与插槽