与 vue.js 一起探索渲染 watcher、computed 和 user watcher

2023-11-24 20:26:19

vue.js 中的响应式系统

vue.js 的响应式系统是其核心的一个特点。它允许我们通过简单地修改数据对象来更新视图，而无需手动操作 DOM。这是通过使用 getter 和 setter 函数来实现的。当数据对象中的属性被访问时，getter 函数会被调用。当属性被修改时，setter 函数会被调用。

渲染 watcher

渲染 watcher 是 vue.js 用于跟踪数据变化并更新视图的一个机制。当数据对象中的属性被修改时，渲染 watcher 就会被触发。渲染 watcher 会重新计算模板，并将结果渲染到视图中。

computed

computed 是 vue.js 中的一个语法糖，它允许我们定义计算属性。计算属性是基于数据对象中的其他属性计算得出的。当计算属性所依赖的数据属性发生变化时，计算属性的值就会重新计算。计算属性的值可以通过模板直接访问。

user watcher

user watcher 是 vue.js 中的一个 API，它允许我们手动创建 watcher。user watcher 可以用来监听任何数据对象中的属性的变化。当属性发生变化时，user watcher 就会被触发。user watcher 可以执行任意 JavaScript 代码。

实例代码

// 渲染 watcher

const app = new Vue({
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

app.$mount('#app')

app.count++ // 视图更新

// computed

const app = new Vue({
  data() {
    return {
      count: 0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  template: `<div>{{ doubleCount }}</div>`
})

app.$mount('#app')

app.count++ // 视图更新

// user watcher

const app = new Vue({
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log('count changed from', oldVal, 'to', newVal)
    }
  },
  template: `<div>{{ count }}</div>`
})

app.$mount('#app')

app.count++ // 控制台输出：count changed from 0 to 1