会搭建网站找什么工作室,做音乐的网站,求个网站填空题,wordpress企业主题模板前言
Vue3 中可以通过响应式 API 来创建响应式对象#xff0c;相较于 Vue2 中使用 Object.definProperty 来劫持 get 和 set 不同#xff0c;Vue3 中使用的是 Proxy 来创建响应式对象#xff0c;使用Proxy有以下几点优势#xff1a; 1. 对象新增属性不再需要手动 $set 添…前言
Vue3 中可以通过响应式 API 来创建响应式对象相较于 Vue2 中使用 Object.definProperty 来劫持 get 和 set 不同Vue3 中使用的是 Proxy 来创建响应式对象使用Proxy有以下几点优势 1. 对象新增属性不再需要手动 $set 添加响应式Proxy 默认会监听动态添加属性和属性的删除等操作。
2. 消除无法监听数组索引length 属性等等不再需要在数组原型对象上重写数组的方法。
3. Object.defineproperty 是劫持所有对象属性的 get/set 方法,需要遍历递归去实现Proxy 是代理整个对象。
4. Vue2 只能拦截对象属性的 get 和 set 操作,而 Proxy 拥有 13 种拦截方法。 下面介绍了Vue3中最常用搞定几个响应式函数ref、reactive、computed、watch
1. ref响应式数据 ref接受一个内部值返回一个响应式的、可更改的 ref 对象此对象只有一个指向其内部值的属性 .value ref中可以是基本数据类型也可以是引用数据类型
// 基本类型
let username ref(xujingliang);
// 引用类型
let submitForm ref({username:xujingliang,password:123456})// 访问值
console.log(username.value);
console.log(submitForm.value.username);// 修改值
username.value liudehua;
submitForm.value.username liudehua;* 在template模版中使用ref响应式数据直接写名字即可
* 但是在js中如果想引用或者修改ref的值则需要加上.value属性来访问和修改值 2. reactive响应式函数 reactive 返回一个对象的响应式代理。 reactive中的值只能是引用类型即对象、数组
let userInfo reactive({username:xujingliang,password:123456});let userList reactive([{username:xujingliang,password:123456},{username:xujingliang,password:123456}]);// 访问userInfo中的值
console.log(userInfo.username);// 修改userInfo中的值
userInfo.username liudehua;
* 在template模版中使用reactive响应式数据直接写名字即可
* 与ref不同在js中访问和修改reactive的值只需要访问变量名即可 总结ref和reactive学完了二者都是实现响应式数据那么什么时候用ref什么时候用reactive你知道吗 下面我就总结了常见的几种情况
变量类型使用方式对象当变量为Object时适合使用reactive来定义数组 1、如果数组内容赋值后不变动很适合用reactive比如从接口请求到的下拉选项字典 2、如果数组内容会根据某些情况变动就适合用ref比如分页表格。用reactive也可以但是会想要修改渲染后的数据稍显麻烦 数字、字符、布尔值 reactive不支持基本数据类型只能用ref了 3. computed计算函数 computed计算属性computed是依赖于使用它的数据当数据发生变化时自定义方法重新调用执行一次计算属性监测的是依赖值依赖变化的情况下才会重新计算。 script setup
import { ref,computed } from vue// 数量
const count ref(10);// 单价
const price ref(9.99);// 根据响应式数据count和price计算后的总价
const sum computed((){return count.value*price.value; //基于响应式数据做计算之后的值
})/scripttemplatep请输入数量input typenumber v-modelcount //pp请输入单价input typenumber v-modelprice //pp数量{{count}}单价{{price}}总共{{sum}}/p
/template 在实例代码中我们定义了响应式变量 商品数量count 和 响应式变量 商品单价price通过计算数量和单价之后获取响应式数据商品总价的值sum 4. watch侦听函数 watch当需要在数据变化时执行异步或开销较大的操作时computed是无法操作异步数据的所以需要使用watch进行侦听。 4.1 watch侦听单个数据
侦听器watch作用是侦听一个或多个数据的变化数据变化时执行的回调函数两个额外参数immediate立即执行和deep深度侦听
script setup
import { ref,watch } from vue// 存放响应式数据count
const count ref(10);// 存放状态的响应式数据 state
const state ref();// 监听count数据的变化
watch(count,(newValue,oldValue){state.value count发生了变化当前值为count.value;
},{deep:true})/scripttemplatepbutton clickcount点击1/button/pp状态{{state}}/p
/template
示例代码中我们通过点击按钮使响应式数据count自增通过watch监听count的值变化进行操作。 4.2 侦听多个数据
script setup
import { ref,watch } from vue// 存放响应式数据count
const count ref(10);// 存放响应式数据price
const price ref(9.9);// 存放状态的响应式数据 state
const state ref();// 监听count数据的变化
watch([count,price],([newCont,oldCount],[newPrice,oldPrice]){state.value count发生了变化当前count值为count.value当前price值为price.value;
},{deep:true})/scripttemplatepbutton clickcount点击cont1/buttonnbsp;button clickprice点击price1/button/pp状态{{state}}/p
/template
示例代码中我们通过点击按钮分别使响应式数据count和price自增通过watch监听count和price的值变化进行操作。
4.3 精准的监听对象的某个值
script setup
import { ref,watch } from vue// 存放响应式数据userInfo
const userInfo ref({username:admin,password:123456
});// 触发password修改
setTimeout((){userInfo.value.password 123123;
},3000)// 监听userInfo中的值变化
watch(()userInfo.value.password,(newValue,oldValue){alert(密码发生改变)},{immediate:true,deep:true}
)/scripttemplate/template
在上述代码示例中我添加了两个参数一个是immediate一个是deep immediate在侦听器创建时立即触发回调响应式数据变化之后继续执行回调其语法格式如下。 deep通过watch监听的ref对象默认是浅层侦听的直接修改嵌套的对象属性不会触发回调执行。
