知识点

在setup中定义了一个对象，通过结构赋值的方式获取值的时候，要做到响应式渲染的效果，需要加 toRefs（）包起来。

从对象结构出来的值，通过setup函数return出去以后，用到模板里面去，但是要输出对象里面的值，需要对象打点调用。

使用watchEffect()的时候，里面是一个箭头函数作为参数，watchEffect只能获取到改变以后的值。

watchEffect(()=>{})

watch是两个参数，第一个参数是被监听的属性，第二个参数是一个箭头函数。一个watch只能监听一个属性或者对象，如果监听多个，需要用多个watch。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    const app = Vue.createApp({
      // setup函数
      setup() {
        const { reactive, watchEffect, toRefs } = Vue;
        const userObj = reactive({
          username: "张三",
          userEnglishName: "zhangsan",
        });
        // 结构出username放到模板里面去,需要洁toRefs并返回出去
        const { username, userEnglishName } = toRefs(userObj);
        // 使用watchEffect,侦听多个属性
        // watch参数需要填被监听的属性和另一个箭头函数，里面可以获取到改变之前和改变之后的值
        // watchEffect参数不需要填被监听的对象，直接写箭头函数为参数，里面只能获取到改变之后的值
        watchEffect(() => {
          console.log(`中文名发生了改变,变成了` + userObj.username);
          console.log(`英文名也发生了改变,变成了` + userObj.userEnglishName);
        });
        return { username, userEnglishName };
      },
      // 模板,模板里面input框输入和<h1></h1>动态渲染
      template: `
      <input type="text" v-model="username" />
        <h1>{{username}}</h1>
        <input type="text" v-model="userEnglishName" />
        <h1>{{userEnglishName}}</h1>
        `,
    });
    const vm = app.mount("#root");
  </script>
</html>

setup中使用侦听器watchEffect

知识点