Vue中监听属性watch的求值,以及与computed的适用场景

监听属性

特点:惰性。当值第一次绑定时,不会执行监听函数,只有当值发生改变才会执行。

Vue2的写法

html 复制代码
<div id="app">
    {{name}}
<div>
javascript 复制代码
const vmWatch = Vue.createApp({
    data() {
        return{
            name: 'summer',
            obj: {
                title: 'vue3'
            }
        }
    },
    watch: {
        // 第一次不执行
        name(newVal, oldVal) {
            console.log(newVal, oldVal)
        },
        // 立即执行
        name: {
            handler: function(newVal, oldVal) {
                ...
            },
            immediate: true // true 立即执行, false 表示第一次不执行
        },
        // 深度监听 监听对象内部属性的改变
        'obj.title': {
            handler: function(newVal, oldVal) {
                ...
            },
            deep: true
        }
    }
}).mount("#app")

Vue3的写法

单个监听
javascript 复制代码
const age = ref(18)
watch(age, (newVal) => {
    console.log(newVal)
})
不能直接监听响应式对象
javascript 复制代码
const obj = reactive({
    name: 'summer',
    age: 18
})
// 报错
watch(obj.age, (newVal)=> {})
// 使用getter函数
watch(() => obj.age, (newVal)=> {
    console.log(newVal)
})
深层监听
javascript 复制代码
const obj = reactive({
    name: 'summer',
    age: 18
})
watch(obj, (newVal, oldVal) => {})
立即执行
javascript 复制代码
// 第一种写法
watch(
  source,
  (newValue, oldValue) => {
  },
  // 立即执行 
  { immediate: true }
)
// 第二种写法
watchEffect(
  source,
  (newValue, oldValue) => {
  },
)

watch与watchEffect的区别

都能响应式地执行有副作用的回调。主要区别是追踪响应式依赖的方式。

watch 只追踪明确侦听的数据源。仅在数据源改变时才会触发回调。

watchEffect 会在副作用发生期间追踪依赖,它会在同步执行过程中,自动追踪所有能访问到的响应式属性。

仅执行一次
javascript 复制代码
watch(
  source,
  (newValue, oldValue) => {
  },
{ once: true }
)

监听器与计算属性

计算属性computed和监听器watch都可以监听属性的变化,而后处理一些逻辑处理,但是他们都有各自适用的场合。

demo示例代码的对比

html 复制代码
<div id="app">{{fullName}}</div>
javascript 复制代码
const vm = Vue.createApp({
    data() {
        return {
            firstName: 'summer',
            lastName: 'sunny',
            fullName: 'summer sunny'
        }
    },
    watch: {
        firstName(val) {
            this.fullName = val + ' ' + this.lastName
        },
        lastName(val) {
            this.fullName = this.firstName + ' ' + val
        }
    },
    computed: {
        fullName() {
            return this.firstName + ' ' + this.lastName
        }
    }
}).mount("#app")

从上面简单的示例代码也可以看出,使用computed属性代码更加清晰,更合理一些。
使用场景:
computed: 当需要基于现有数据计算出新的数据时,简单的同步操作。
watch: 当需要在数据变化时执行异步或者开销较大的操作时。

相关推荐
拉不动的猪几秒前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
烛阴36 分钟前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中38 分钟前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木42 分钟前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
局外人LZ1 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
宝拉不想努力了2 小时前
vue element使用el-table时,切换tab,table表格列项发生错位问题
前端·vue.js·elementui
鱼樱前端2 小时前
前端必知必会:JavaScript 对象与数组克隆的 7 种姿势,从浅入深一网打尽!
前端·javascript
yzhSWJ2 小时前
Spring Boot中自定义404异常处理问题学习笔记
java·javascript
神仙别闹3 小时前
基于VUE+Node.JS实现(Web)学生组队网站
前端·vue.js·node.js
zyk_5204 小时前
前端渲染pdf文件解决方案-pdf.js
前端·javascript·pdf