Vue 学习笔记-第七弹：js 原理实践

2023-11-08 18:55:35

揭秘 Vue.js 的内部运作：深入探讨 JS 原理与实践

渲染函数：虚拟 DOM 的基石

Vue.js 的核心之一是渲染函数，它将组件模板编译成虚拟 DOM。虚拟 DOM 是 JavaScript 对象的树形结构，反映了组件的结构和状态。当组件状态变化时，Vue.js 比较新旧虚拟 DOM，仅更新必要的 DOM 元素，实现高效更新。

render(h) {
  // h 是 createElement 函数的别名
  return h('div', {
    attrs: {
      id: 'app'
    }
  }, [
    h('h1', 'Hello, world!')
  ])
}

在以上示例中，渲染函数返回一个包含 h1 元素的 div 元素，h1 元素文本内容为 "Hello, world!"。

计算属性：响应性数据的动力

计算属性是 Vue.js 中一种特殊属性，允许定义依赖于其他属性的计算属性。计算属性语法如下：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
}

fullName 是一个计算属性，依赖于 firstName 和 lastName 属性。当 firstName 或 lastName 属性变化时，fullName 属性自动更新。

侦听函数：数据变化的守护者

侦听函数允许侦听组件数据变化并执行操作。侦听函数语法如下：

watch: {
  count(newValue, oldValue) {
    console.log(`count changed from ${oldValue} to ${newValue}`)
  }
}

以上示例中，侦听函数侦听了 count 属性的变化，当 count 属性变化时，侦听函数触发，并输出一条日志消息。

示例代码

以下代码示例演示了 Vue.js 的 JS 原理实践：

const app = new Vue({
  el: '#app',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
})

在这个示例中，我们创建了一个 Vue 实例，并在 data() 方法中定义了一个 count 属性。在 methods() 方法中，我们定义了一个 increment() 方法，将 count 属性加 1。点击页面上的按钮时，触发 increment() 方法，更新 count 属性，页面上的计数器增加 1。

常见问题解答