vue3与vue2区别

响应式原理

vue2响应式原理采用 Object.defineProperties 监听对象的getter与setter
Vue3 pxoy代理的方式监听对象

启动方式

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

import {
    
    createApp} from 'vue'
createApp(App).use(store).use(router).mount('#app')

全局定义方法

Vue.prototype.$http = axios

var spp = cerateApp(App)
app.config.globalProperies.$http = axios

template 根组件

vue2有且只有一个根组件
vue3可以有多个

生命周期

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

vue3
创建前后 beforeCreate，created
挂载前后 beforeMount，mounted
更新前后 beforeUpdate，updated
卸载切换 beforeUnmount，unmounted

vue3与vue2相比较的优点

优点1 按需导入,需要什么功能导入什么
优点2 写法更加接近原生js，阅读更清晰
优点3 没有this,降低代码耦合性，提高了复用性

<template>
<div>
<button @click="num++">{
    
    {
    
    num}}</button>
<button @click="setNum()">改变为5</button>
<div v-for="item in list" :key="item">{
    
    {
    
    item}}
<button @click="list.splice(index,1)">x</button>
</div>
<p>{
    
    {
    
    twiceNum}}</p>
<p ref="myp">我爱我的祖国</p>
</div>
</template>
<script>
import {
    
    ref,reactive,watch,watchEffect,computed,onMounted} from 'vue';
// 优点1 按需导入,需要什么功能导入什么
// 优点2 写法更加接近原生js，阅读更清晰
// 优点3 没有this,降低代码耦合性，提高了复用性
export default {
    
    
  setup(){
    
    
   // 定义一个值类型的响应式对象num 默认值是5
   const num=ref(5)
   // 定义一个应用类型的响应式数据list 默认是
   const list = reactive(["vue","react","angular"])
   // 返回num
   // 定义一个修改num的方法
   function setNum(){
    
    
    // 在steper内部修改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>
<style>
</style>