A diferença entre vue3 e vue2

princípio responsivo

O princípio responsivo vue2 usa Object.defineProperties para ouvir o getter e setter do objeto
Proxy Vue3 pxoy para ouvir o objeto

método de início

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

ver 3

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

método de definição global

Vue.prototype.$http = axios

ver 3

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

componente raiz do modelo

Vue2 tem e apenas um componente raiz
vue3 pode ter vários

vida útil

BeforeCreate antes e depois da criação do vue2
, beforeMount antes e depois da montagem criada , beforeUpdate antes e depois da atualização
montada , beforeDestroy antes e depois da destruição atualizada, destruída

beforeCreate antes e depois da criação do vue3
, beforeMount antes e depois da criação
da montagem,
beforeUpdate antes e depois da atualização montada,
opção de desmontagem atualizada beforeUnmount, desmontado

Vantagens do vue3 em comparação com o vue2

Vantagem 1 Importe sob demanda, importe quais funções são necessárias
Vantagem 2 O método de escrita é mais próximo do js nativo e a leitura é mais clara
Vantagem 3 Sem isso, o acoplamento do código é reduzido e a reutilização é aprimorada

<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>