美文网首页
vue3-ref、reactive、toRefs响应式引用

vue3-ref、reactive、toRefs响应式引用

作者: 编程小橙子 | 来源:发表于2021-12-04 17:39 被阅读0次
vue.jpg

ref、reactive响应式引用引用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <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>
    // ref、reactive 响应式的引用
    // 原理:通过proxy对数据进行封装,当数据变化时,触发模板等内容的更新
    // ref处理基础类型的数据
    // reactive处理非基础类型的数据
    const app = Vue.createApp({
      // template: `<div>{{nameObj.name}}</div>`,
      template: `<div>姓名:{{name}},年龄:{{age}}</div>`,
      // created 实例被完全初始化之前
      setup(props, context) {
        // const { ref } = Vue;
        // // proxy,'hello'变成proxy({value:'hello'})的响应式引用
        // let name = ref("hello");
        // setTimeout(() => {
        //   name.value = "little-orange";
        // }, 2000);
        // return {
        //   name,
        // };
        const { reactive, toRefs } = Vue;
        // proxy,{ name: "little-orange" }变成proxy({ name: "hello" })的响应式引用
        const nameObj = reactive({ name: "little-orange", age: 23 });
        setTimeout(() => {
          nameObj.name = "hello";
          nameObj.age = 25;
        }, 2000);
        const { name, age } = toRefs(nameObj); //通过toRefs转换后才可以2秒后改变name的值
        return { name, age };
      },
    });
    const vm = app.mount("#root");
  </script>
</html>

vue3来了!欢迎关注。后期持续更新~~

相关文章

网友评论

      本文标题:vue3-ref、reactive、toRefs响应式引用

      本文链接:https://www.haomeiwen.com/subject/xaxbxrtx.html