Vue2进阶至Vue3 二（reactive & to相关）

2023-12-21 07:41:48

Vue3 中的 reactive

在 Vue2 中，我们可以使用 Vue.set() 方法来设置响应式数据，而在 Vue3 中，我们可以使用 reactive() 方法来实现同样的目的。reactive() 方法可以将一个普通的 JavaScript 对象转换为响应式对象，这样当对象的属性发生变化时，Vue3 就会自动更新视图。

const app = Vue.createApp({
  data() {
    return {
      count: 0
    }
  }
})

// 将 count 对象转换为响应式对象
const count = reactive(app.data.count)

// 监听 count 的变化
count.addEventListener('change', () => {
  console.log('count changed:', count.value)
})

// 修改 count 的值
count.value++

在上面的例子中，我们首先创建了一个 Vue 实例，然后将 count 对象转换为响应式对象。接下来，我们监听 count 的变化，当 count 的值发生变化时，我们会输出一条日志。最后，我们修改 count 的值，此时，我们会看到控制台输出了一条日志，表明 count 的值已经发生了变化。

Vue3 中的 to

在 Vue2 中，我们可以使用 v-bind 指令来绑定数据，而在 Vue3 中，我们可以使用 to 指令来实现同样的目的。to 指令可以将一个 JavaScript 表达式绑定到一个 HTML 元素的属性上，当表达式的值发生变化时，Vue3 就会自动更新元素的属性。

<template>
  <div>
    <input type="text" v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const message = reactive('')

    return {
      message
    }
  }
}
</script>

在上面的例子中，我们首先创建了一个 Vue 实例，然后将 message 对象转换为响应式对象。接下来，我们使用 to 指令将 message 对象绑定到 input 元素的 value 属性上，这样当用户输入内容时，Vue3 就会自动更新 input 元素的 value 属性。同时，我们还使用了一个 p 元素来显示 message 对象的值，这样当 message 对象的值发生变化时，Vue3 就会自动更新 p 元素的内容。

Vue3 中的模板渲染

在 Vue2 中，我们使用模板语法来渲染组件，而在 Vue3 中，我们可以使用 render 函数来实现同样的目的。render 函数可以接收一个虚拟 DOM 节点作为参数，并返回一个真正的 DOM 节点。

const app = Vue.createApp({
  render() {
    return h('div', {}, [
      h('p', {}, 'Hello, world!')
    ])
  }
})

app.mount('#app')

在上面的例子中，我们首先创建了一个 Vue 实例，然后定义了一个 render 函数。render 函数返回了一个虚拟 DOM 节点，其中包含了一个 p 元素和一个文本节点。最后，我们将 Vue 实例挂载到一个 HTML 元素上，这样 Vue3 就会自动将虚拟 DOM 节点渲染成真正的 DOM 节点。