Vue3和Vue2的部分用法差异 (持续更新中)

一、指令篇

Vue3与Vue2之间生命周期函数在销毁的时候有变化

Vue2 --> Vue3

beforeDestroy --> beforeUnmount

destroyed --> unmounted

vue3中的setup() 等于vue2生命周期的beforeCreate + created

this

vue2中：一般情况下都要使用this

vue3中：因为setup函数的存在，所有的props、data等都不需要用this进行访问（vue3对                     vue2绝大多数是兼容的，如果你用了vue2相关的东西，那你还是需要像vue2一样                   书写）

定义全局变量的方法变化

Vue2

定义：
Vue.prototype.$http = ""
Vue.prototype.$baseUrl= "http://test"

使用：

页面里面用的时候直接 this.$baseUrl

Vue3
const app = createApp({})

定义

方式一：app.config.globalProperties.$baseUrl = "http://test"
方式二：app.$temp = "$temp-全局变量"+window.location.origin

使用：

const { proxy,appContext } = getCurrentInstance();

方式一取用：console.error("proxy--", proxy.$baseUrl);
方式二取用：console.error("appContext--", appContext.app.$temp);

创建Vue实例变化

Vue2

import Vue from "vue";

new Vue({
  el: "#app",
  router,
  store,
  render: (h) => h(App),
});

Vue3

import { createApp } from "vue";

const app = createApp(App);
app.use(Vant)
    .use(store)
    .use(router)
    .mount("#app");

Vue3中v-model取代了.sync

变更：在自定义组件上使用v-model时， 属性、事件的默认名称变了 ( modelValue->value )

变更：v-bind的.sync修饰符在 Vue3 中被去掉了, 合并到了v-model里

新增：同一组件可以同时设置多个 v-model

新增：开发者可以自定义 v-model修饰符

<input v-model="searchValue"><input>
<input :value="searchValue" @input="searchValue=$event"><input>
 
 
<input v-model="isVisible">input>
<input :modelValue="isVisible" @update:modelValue="isVisible = $event">input>

    
    <son
      v-model:mobileNo="mobileNo"
      v-model:form="selectForm"
      :tableDataTest="tableDataTest"
      @sonClick="sonClickBy"
    />
 
 
// 子组件emit传值给父组件
const emit = defineEmits();
// 同步修改父组件的值
const changeValue = (value)=>{
  emit("update:mobileNo", value)
}

Vue3同时使用v-if 和 v-for时，v-if 比 v-for 优先级更高

Vue2同时使用v-if 和 v-for时，v-for 比 v-if 优先级更高

插槽使用变化

<div>
    <slot :current="toolTipData" name="test">slot> // 具名 作用域插槽
    <slot>slot> //默认插槽
div>
 
<test>
    <template>
       <div>默认插槽div>
    template>
    // 作用域插槽
    <template slot="test" slot-scope="{ current }">
       <div>具名插槽div>
     template>
 test>
 
 
 
<div>	
   <slot name="test" :newData="slotsData">slot>
   <slot>slot>
div>
 
<test>
    <template #default> // 可以写为v-slot:default  #后面跟的是插槽名称
       <div>默认插槽div>
    template>
    //作用域插槽
    <template #test="{ newData }"> // 可以写为v-slot:test="newData"
      <p>{{ newData.aa }}p>
      <p>{{ newData.bb }}p>
    template>
test>
 

Vue.prototype 替换为 config.globalProperties

vue2中：绑定全局的变量、方法等：Vue.prototype.$ajax = xxxx
vue3中：const app = createApp({});

               app.config.globalProperties.$ajax = xxxx