目录

一、vue3与vue2的区别

1.响应式原理

2.启动方式

3.全局定义方法

4.tempmlate 根组件

5.生命周期

二、setup组合式api

1.setup

一、vue3与vue2的区别

1.响应式原理

vue2：响应式原理采用Object.defineProperties 监听对象的getter与setter

vue3：pxoy代理的方式监听对象

2.启动方式

vue2:

import Vue from 'Vue'
new Vue ({
    store,
    router,
    render:h=>h(App)
}).$mount('#app')

vue3:

import { createApp } from 'vue'

createApp(App).use(store).use(router).mount('#app')

3.全局定义方法

vue2:

Vue.prototype.$http=axios;

vue3:

var app=createAPP(app)
app.config.globalProperties.$http = axios;

4.tempmlate 根组件

vue2:有且只有一个根组件

vue3:随意，可以多个根组件

5.生命周期

vue2:

创建前后 beforeCreate,created
挂载前后 beforeMount,mounted
更新前后 beforeUpdate,updated
销毁前后 beforeDestroy,destroyed

vue3:

创建前后 beforeCreate,created
挂载前后 beforeMount,mounted
更新前后 beforeUpdate,updated
卸载前后 beforeUnmount,unmounted

vue2的生命周期最后是销毁，而vue3的是卸载

二、setup组合式api

1.setup

1.按需导入,需要什么功能导入什么

2.写法更加接近原生js,阅读更清晰

3.没有this,降低代码耦合性,提高了复用性

<template>
  <div>
    <button @click="num++">{{ num }}</button>
    <button @click="setNum()">改变为5</button>
    <div v-for="(item,index) in list" :key="item">
      {{item}} 
      <button @click="list.splice(index,1)">x</button>
    </div>
    <p>{{twiceNum}}</p>
    <p ref="myp">我爱我的祖国</p>
  </div>
</template>
<script>
// 导入一个响应式ref
import { ref ,reactive,watch,watchEffect,computed,onMounted} from 'vue';
export default {
  setup() {
    // 定义一个值类型的响应式对象num 默认值是5
    const num = ref(5);
    // 定义一个引用类型的响应式数据list 默认是
    const list = reactive(["vue","react","angular"])
    // 定义一个修改num的方法
    function setNum(){
      // 在setup内部修改num值要修改num.value的值
      num.value = 5;
    }
    watch(num,function(nval,oval){
      console.log("num由",oval,"变化为",nval)
    })
    watchEffect(()=>{
      // 只要在改回调函数中引用的变量,都会监听到变化
      // console.log(num.value,list[1],'变化了');

    })
    var twiceNum = computed(()=>num.value*2)
    // 在setup没有 创建前后,有挂载,更新,卸载前后
    var myp = ref(null);
    // setup中的生命周期前面加on
    onMounted(()=>{
      console.log("组件已经挂载完毕");
      // myp.value就是dom节点
      myp.value.addEventListener("click",()=>alert(myp.value.innerText))
    })
    return { num,list,setNum,twiceNum,myp};
  }
}
</script>