WIP: Composition API——Ref和Reactive

Vue3中的Composition API Ref和Reactive

• Composition API

  • Vue3最大的特点在于引入了Composition API，而Composition API中的Ref和Reactive允许我们创建响应式数据。

• Vue2中的响应式

  • 如果想要在Vue2中创建响应式数据，那么需要在data函数中返回的对象中声明这个数据。

    <template>
      <h1>{{ title }}</h1>
    </template>
    <script>
      export default {
        data: () => {
          return{
            title: 'title'
          };
        },
      };
    </script>
    

    如果不在data函数中返回的对象中声明这个数据，那么这个数据将不是响应式的。（需要经过Vue.$set()将不在data中声明的数据转化为响应式数据）。

• Vue3中的响应式

  • 在Vue3中我们可以使用ref或reactive来创建响应式数据。

    <template>
      <h1>{{ title }}</h1>
    </template>
    <script>
      import {ref} from 'vue';
      export default {
        setup(){
          const title = ref('Hello, Vue3.');
          
          setTimeout(() => {
            title.value = 'New Title';
          },5000);
          return {
            title
          };
        },
      }
    </script>
    

• Ref

  • 如果需要创建原始数据类型的响应式数据，那么推荐使用ref()。

    import {ref} from 'vue';
    
    export default{
      setup(){
        const title = ref("");
        const one = ref(1);
        const isValid = ref(true);
        const foo = ref(null)
      }
    }
    

  • 我们使用ref()来实现上面Vue2中的响应式内容

    <template>
      <title>{{ title }}</title>
    </template>
    <script>
      import {ref} from 'vue';
      
      export default {
        setup(){
          const title = ref('title');
          
          setTimeout(() => {
            title.value = 'new title';
          },5000);
          
          return {title};
        }
      }
    </script>
    

    ref()函数接收一个内部值，并返回一个响应式的ref对象。ref对象具有一个属性value，这个value属性指向内部值。

    如果想要访问或改变值，那么需要使用title.value

• Ref拆箱

  • 在上面的例子中，可以看到在模板中我们不需要使用ref对象的value属性就可以访问到ref对象的内部值。
    • 当ref作为渲染上下文（也就是从setup()返回的对象）的属性返回并在模板中访问，那么它会自动展开为内部值，所以在模板中访问ref对象的内部值不需要引用ref对象的value属性。

• Reactive

  • reactive()适合于创建响应式引用类型。

    <template>
      <title>{{ data.title }}</title>
    </template>
    
    <script>
      export default {
        setup(){
          const data = reactive({
            title: 'title',
          })
          return {
            data
          };
        }
      }
    </script>
    

    因为reactive()函数返回的是一个响应式的对象，当我们想要在模板中访问这个对象的中的属性的时候，需要使用data.title才可以访问或更改。