Vue watch和computed区别
计算属性 computed :
1. 支持缓存,只有依赖数据发生改变,才会重新进行计算
2. 不支持异步,当computed内有异步操作时无效,无法监听数据的变化
3. 计算属性默认只有getter(根据某个属性值发生变化而变化),可以在需要的时候自己设定setter(自身的值发生变化从而修改别的属性值)
需要注意的是,就算在data中没有直接声明出要计算的变量,也可以直接在computed中写入。
<template> <div class="form-container"> <div class="logo">登录</div> <div>{{name}}</div> </div> </template> <script> export default { name: "HelloWorld", data() { return { form:{ userName :'张三', passWord:'123456' }, name:'' }; }, computed: { // names() { // return this.form.userName + ":" + this.form.passWord; // }, names:{ get() { return this.form.userName + ":" + this.form.passWord; }, set(newVal) { this.form.userName = newVal } } } }; </script>
只有当computed监测的值变化的时候 , set才回被调用
<template> <div class="form-container"> <div class="logo">登录</div> <div>{{name}}</div> <el-button type="primary" @click="changeVal">修改computed值</el-button> </div> </template> <script> export default { name: "HelloWorld", data() { return { form:{ userName :'张三', passWord:'123456' }, name:'' }; }, computed: { // name() { // return this.form.userName + ":" + this.form.passWord; // }, name:{ get() { return this.form.userName + ":" + this.form.passWord; }, set(newVal) { this.form.userName = newVal } }, methods:{ // 点击触发click就触发comouted里面的set方法 changeVal(){ this.name='小明' } } } }; </script>
侦听属性watch:
1. 不支持缓存
2. watch支持异步;
3. 监听的函数接收两个参数,第一个参数是最新的值;第二个参数是旧值
4. 监听数据必须是data中声明过
immediate:组件加载立即触发回调函数执行,
deep: 深度监听,为了发现对象内部值的变化,复杂类型的数据时使用,例如数组中的对象内容的改变,注意监听数组的变动不需要这么做。注意:deep无法监听到数组的变动和对象的新增,参考vue数组变异,只有以响应式的方式触发才会被监听到。
<template> <div class="form-container"> <div class="logo">登录</div> <div>{{name}}</div> </div> </template> <script> export default { name: "HelloWorld", data() { return { form:{ userName :'张三', passWord:'123456' }, name:'', a:{ b:12, c:20 }, }; }, watch:{ //监听属性发生变化给另一个变量赋值 'form.userName':function(val){ this.form.passWord = val+'123' }, // 监听obj a:{ handel(b,c){ console.log(b) console.log(c) }, deep:true //深度监听obj类型 }, 'form.userName':{ handel(val){ console.log(val) //页面初始化时候是空,当userName发生变化时val就有值了 }, immediate: true //页面初始化就加载监听函数 } } }; </script>