vue3新特性vue2和vue3响应式的区别: vue2中：修改对象身上本身现有的属性会触发对象getter和sett

vue2和vue3响应式的区别:

vue2中：

     const initData = {
        a: 1
      };
      const data = {};
      Object.keys(initData).forEach((keys) => {
        //会直接在一个对象身上定义一个新的属性或者修改现有的属性
        Object.defineProperty(data, keys, {
          get() {
            console.log('访问元素', keys);
            return initData[keys];
          },
          set(v) {
            console.log('修改元素', keys);
            initData[keys] = v;
          }
        });
      });

修改对象身上本身现有的属性会触发对象getter和setter属性，依赖收集是正常的

2.当动态增加对象身上的属性时，不会重新触发对象身上的响应式收集

3.如何解决？Vue.set || this.$set

思路：先判断类型：null或undefined 数组：通过原有方法触发响应式依赖对象

// 代码待补充

vue3中：

     const initData1 = {
        a: 1
      };
      const proxy = new Proxy(initData1, {
        get(target, key, receiver) {
          console.log('访问元素', key);
          return Reflect.get(target, key, receiver);
        },
        set(target, key, value, receiver) {
          console.log('修改元素', key);
          return Reflect.set(target, key, value, receiver);
        }
      });

无论是修改对象身上的属性还是访问对象身上新增的属性时，都会触发对象的响应式操作

vue2和vue3写法区别：

export default {
  data(){
   return {
    count:0
    }
  },
  computed:{
   multiple(){
    return 2*this.count
    }
  },
  methods: {
   increase(){
     this.count++
   }
 }
}

<script setup> 
  import { ref } from 'vue' 
  const count = ref(0) 
  function increase(){
     count.value++
   }
</script>

vue3的新特性

组合式 API (Composition API)

ref:添加响应式的值，具体的是获取proxy对象里面的某个值

如何判断一个值是不是ref:isRef

setup(){
 const conunt = ref(10)
 const total = 30
 console.log("count is ref": isRef(count)) //true
 console.log("total is ref": isRef(total)) //false
}

reactive:通过proxy创建出来的实例
toRefs
readOnly:只读不可修改
shallowReactive
shallowReadonly

生命周期

区别：新增两个生命周期

vue2:生命周期 vue3:生命周期钩子(全部加上on)

异步组件：按需加载

！！！按需加载的前提是：打包构建的产物是分包的，不是和其他文件柔和在一起

声明异步组件：

import { defineAsyncComponent } from 'vue' 
const AsyncComp = defineAsyncComponent(() =>import('./components/MyComponent.vue') )

注册异步组件：

app.component('MyComponent', defineAsyncComponent(() => import('./components/MyComponent.vue') ))

自定义指令

teleport

目的:将子节点渲染到父节点以外的节点上

vue3新特性