vue3入门知识点

vue2与vue3的区别

1.响应式原理

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

2.启动方式

在main.js文件夹中
vue2

vue2
new Vue({
store,
router
render: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.template根组件

vue2，有且只有一个根组件
vue3，随意

5.声明周期

vue3没有销毁前后(beforeDestroy,destroyed),有卸载前后(beforeUnmount,unmounted)

6 vue3格式

vue3数据方法书写更加有效化，都可以以methods方式书写，需要用到什么方法，导入什么，然后把值通过return返回出来，可以都写在setup里面

<template>
  <div>
    <h1>首页</h1>
    <button @click="num++">{{ num }}</button>
    <button @click="setNum()">改变</button>
  </div>
  <div>
    <h1>根节点2</h1>
    <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";
export default {
  setup() {
    const num =ref(5);
    const list = reactive(["vue","react","angular"])
 
    function setNum() {
      num.value =10
    }
    watch(num,function(noval,oval){
      console.log("num从",oval,"变成",noval);
    }) 
    watchEffect(() => {
      //只要在改回调函数中引用的变量，都会监听到变化
      console.log(num.value,list[1],'变化了');
    })
      var twiceNum =computed(()=>num.value*2)
      var myp =ref(null)
    onMounted(()=>{
    console.log("组件已经挂载完毕");
    myp.value.addEventListener("click",()=>alert(myp.value.innerText))
  })
 
       return {num ,list,setNum,twiceNum,myp}
  }

}
</script>