[JavaScript知识库]Vue3和Vue2的部分用法差异 (持续更新中)

一、指令篇

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

Vue2 -->?Vue3

beforeDestroy --> beforeUnmount

destroyed --> unmounted

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

定义全局变量的方法变化

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修饰符

<!-- Vue2中v-model -->
<input v-model="searchValue"><input>
<!-- 相当于 -->
<input :value="searchValue" @input="searchValue=$event"><input>


<!-- Vue3中v-model -->
<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?优先级更高

插槽使用变化

<!--Vue2插槽使用-->
<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>



<!--Vue3插槽使用 插槽使用v-slot 简写用#-->
<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>