vue3新特性

Vue3新特性

image.png

1. 创建App的方式
   [用法上]实例化对象时 new Constructor -> createXXX;
   [优点] 打包后的代码更加简洁,没有用到的方法会被tree-shaking

2. options API -> composition API:
   新增composition API方式组织代码.
   [特点] composition API以业务逻辑为中心,当业务比较多时,能使代码更加内聚. options API以数据为中心

3. 响应式原理:
   ES5:Object.defineProperty -> ES6: Proxy
   [优点] 1.懒代理,提高性能 2.告别Vue.set

4. setup组件选项
   setup(props, context);
   props不能直接解构,因为会消除props的响应式,所以要使用toRefs进行解构.
   setup里面this不是vue实例,是undefined,因为setup在beforeCreate之前调用,组件实例尚未被创建。
   context暴露三个组件的 property：

   • attrs: 非响应式数据
   • slots: 非响应式数据

   • emit: 发射数据
     生命周期钩子函数可以注册到setup内部,和options API之间的映射:

     
     image.png

5. 响应式数据:

   1. toRefs,解构对象,解构后的数据仍是响应式数据.如果不使用toRefs,数据的响应式就丢失了

   setup(props){
   let {title} = toRefs(props);
   }
   

   2. ref(val: 基本数据类型) : 对象 vs reactive(obj: 复杂数据类型): 对象

   <template>
   <div class="hello">
       <h1>{{ msg }} {{ count  }}</h1>
       <div>{{book.title}}</div>
       
   </div>
   </template>
   
   <script lang="ts"> 
   import { defineComponent, reactive, ref } from 'vue';
   
   export default defineComponent({
   name: 'HelloWorld',
   props: {
       msg: String
   },
   setup() {
       let count = ref(0);
       count.value ++;
       let book = reactive({title: 'Vue3 从入门到放弃'});
       return {
       count,
       book
       }
   }
   });
   </script>
   

   image.png
   

   经过ref()的包装,返回的值是RefImpl的实例

   
   image.png
   

   通过reactive()包装,返回的值是Proxy的实例

   
   image.png
   setup中的this是undefined

   3. unref 把ref()的包装对象进行拆包

      
      image.png

   unref(2) // 2, 对原始数据类型的数据拆包也是可以的
   

   4. toRef 为源响应式对象上的 property 性创建一个 ref

       const state1 = reactive({
       foo: 1,
       bar: 2,
       });
       const fooRef = toRef(state1, "foo");
   

   5. toRefs 将响应式对象转换成普通对象,普通对象的属性值是RefImpl类型

   const state = reactive({
       foo: 1,
       bar: 2,
       });
       const stateAsRefs = toRefs(state);
   

   image.png
   6. computed
      源码:

   export declare function computed<T>(getter: ComputedGetter<T>): ComputedRef<T>;
   export declare interface ComputedRef<T = any> extends WritableComputedRef<T> {
       readonly value: T;
   }
   

   用法:

       let count = ref(0);
       let computedCount = computed(() => count.value + 'a'); // 参数是一个ComputedGetter<T>,是一个function,返回的是ComputedRef<T>实例,value属性是只读的
       console.log(plusOne.value) // 2
       plusOne.value++ // error,因为是只读
   

   7. watch
      侦听器 data 源可以是返回值的 getter 函数，也可以是 ref

   // 侦听一个getter
   const state = reactive({ count: 0 })
   watch(
   () => state.count,
   (count, prevCount) => {
       /* ... */
   }
   )
   
   // 直接侦听一个ref
   const count = ref(0)
   watch(count, (count, prevCount) => {
   /* ... */
   })
   

6. 新的全局API
   createApp(App: Component)
   defineComponent:启用vue组件选项中的类型类型推断.由于Vue3默认使用ts,所以该方法用来开启类型推断