vue3 基础

vue3

vue3与vue2的区别

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

2.启动方式

// vue2 运用组件
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.globalProperies.$http = axios;

4.template 根组件
Vue2
有且只有一个根组件
vue3
没有限制

5.生命周期

//vue2
beforeCreate ,created    // 创建前后
beforeMount ,mounted     // 挂载前后 
beforeUpdate,updated     // 更新前后
beforeDestroy,destroyed  // 销毁前后
// vue3
beforeCreate ,created    // 创建前后 
beforeMount ,mounted     // 挂载前后 
beforeUpdate,updated     // 更新前后
beforeUnmount,unmounted  // 卸载切换 

setup

• 类型：Function

1.setup 函数是一个新的组件选项。它是组件内部使用组合式 API 的入口点。
2.调用时间：在创建组件实例时，在初始 prop 解析之后立即调用 setup。在生命周期方面，它是在 beforeCreate 钩子之前调用的。
3.template内使用：如果 setup 返回一个对象，则该对象的属性将合并到组件模板的渲染上下文中
4.setup() 内的声明的函数、响应式数据，外部要用的话，必须 return {} 出去！

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

有了setup、composition api后，我们可以将这例子中的4个功能逻辑拆分到对应的.js文件文件，使用composition api编写业务代码，然后引入到sfc组件的setup里使用。此时我们修改其中1处功能逻辑，只需要去对应的.js文件进行修改即可，而不必被其他的功能逻辑代码干扰。

错误用法 ：
有些人写setup，以为是将vue2的写法，挪到setup内声明、return出去，导致setup内代码特别长，并且比options api写法更难以阅读！（当然代码量少的情况下，不影响阅读 也可不拆分）

代码

<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>
import { ref ,reactive,watch,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的方法
    function setNum(){
      // 在setup内部修改num值要修改num.value的值
      num.value = 5;
    }
    watch(num,function(nval,oval){
      console.log("num由",oval,"变化为",nval)
    })
    var twiceNum = computed(()=>num.value*2)
    // 在setup没有 创建前后,有挂载,更新,卸载前后
    var myp = ref(null);
    onMounted(()=>{
      console.log("组件已经挂载完毕");
      // myp.value就是dom节点
      myp.value.addEventListener("click",()=>alert(myp.value.innerText))
    })
    return { num,list,setNum,twiceNum,myp};
  }
}
</script>