vue3高级

响应式原理

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

启动方式

• vue2
  new Vue({
  store,
  router,
  render:h=>h(App)
  }).$mount(“#app”)
• vue3
  import {createApp} from ‘vue’
  createApp(App).use(store).use(router).mount(‘#app’)

// vue3启动方式
// createApp(App).use(store).use(router).mount('#app')


// 创建一个app实例（分开写）
var app = createApp(App)
// 挂载vue3的全局方法 
app.config.globalProperties.$http = axios
app.config.globalProperties.$say = function(msg="我爱我的祖国"){ alert(msg)}
// 使用插件与挂载
app.use(store).use(router).mount('#app')


// vue2启动方式
// import Vue from 'Vue'
// Vue.prototype.$http = axios
// new Vue({
//     router,
//     store,
//     render:h=>h(App)
// }).$mount('#app')

全局方法定义

• vue2
  Vue.prototype.$http = axios
• Vue3
  var spp = cerateApp(App)
  app.config.globalProperies.$http = axios

template根组件

• Vue2有且只有一个根组件
• Vue3随意

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
  <div>你好vue</div>
</template>

生命周期

• Vue2
  创建前后 beforeCreate，created
  挂载前后 beforeMount，mounted
  更新前后 beforeUpdate，updated
  销毁前后 beforeDestroy，destroyed
• Vue3
  创建前后 beforeCreate，created
  挂载前后 beforeMount，mounted
  更新前后 beforeUpdate，updated
  卸载切换 beforeUnmount，unmounted

<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)">×</button>
    </div>
    <p>{{twiceNum}}</p>
    <p ref="myp">我爱我的祖国</p>
  </div>
</template>

<script>
// 优点1：按需引入，需要什么功能导入什么
// 优点2：写法更加接近原生js，阅读更清晰
// 优点3：没有this，降低代码耦合性，提高了复用性
// 导入一个响应式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(){
      // 在setNum内部修改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>