Vue3.0 升级指南安装问题 1、需要单独安装*"vue-loader-v16"*: "16.0.0-beta.5.4

安装问题

1、需要单独安装*"vue-loader-v16"*: "16.0.0-beta.5.4"版本

2、安装全局启动命令：npm install -g @vue/cli-service-global

elementUI 问题

安装 element-plus

main.js 引入

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
const app = createApp(App);
app.use(ElementPlus, { size: 'small', zIndex: 3000 });
app.mount('#app');

在应用之间共享配置

for example：

import { createApp } from 'vue';
import A from './A.vue';
import B from './B.vue';
const createMyApp = options => {
const app = createApp(options);
      app.directive('focus' /* ... */);
      return app;
};
createMyApp(A).mount('#a');
createMyApp(B).mount('#b');

变动

1、支持多个标签同级放在 template 下了

2、h 渲染函数在 vue 里引用

import { h } from "vue"; 原先是在 render 渲染函数的参数里。

3、nextTick 需要显式的引入了

import { nextTick } from 'vue';

4、关于 v-model 的变动：

2.x：v-model 等价于value和input，比如这样：

<ChildComponent v-model="pageTitle" />
<!-- 等价于下面的代码 -->
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

子组件 ChildComponent 需要修改 v-model 的值时:

this.$emit('input', value);

2.x 自定义组件 props 有双向绑定.sync 修饰符的，

abc.sync="'123'"替换为 v-model:abc

3.x：v-model 等价于modelValue和update:modelValue，比如这样：

<ChildComponent v-model="pageTitle" />
<!-- 等价于下面的代码 -->
<ChildComponent :modelValue="pageTitle" @update:modelValue="pageTitle = $event"/>

子组件 ChildComponent 需要修改 v-model 的值时:

this.$emit('update:modelValue', value);

若需要更改 propName,可以将一个参数传递给 model，比如：

<ChildComponent v-model:title="pageTitle" />
<!-- 等价于下面的代码 -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

子组件 ChildComponent 需要修改 title 的值时:

this.$emit('update:title', value);

同时 vue3.0 允许我们在同一个子组件上定义多个 v-model：

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />
<!-- 等价于下面的代码 -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" :content="pageContent" @update:content="pageContent = $event" />

子组件依然是这样修改 prop

this.$emit('update:title', value); <!-- 和 --> this.$emit('update:content', value);

5、关于 ref 的变化获取 dom 的 ref 两种获取方式：

5.1

<div ref="myRef"></div>
<script>
const myRef = ref(null);  // 定义一个与ref名称一致的变量名，初始赋值null
</script>

5.2

<div v-for="item in 10" :key="item" :ref="setItemRef">{{ item }}</div>
<script>
// 使用变量名方式赋值给ref
const itemRefs = ref([]);
 const setItemRef = ref => { itemRefs.value.push(ref); } </script>

6、生命周期变化

7、异步组件

异步组件引用需要添加 defineAsyncComponent 函数来显式的引用了(多了一个 defineAsyncComponent 函数包裹)，如：

import { defineAsyncComponent } from 'vue' 
export default {     ....,    
components: {         NextPage: defineAsyncComponent(() => import('./A.vue'));     } };

原先是这样的：

components: {     NextPage: () => import('./A.vue'); }

8、属性 attribute 的强制行为：

9、$children

2.x 时，可以通过 this. $children直接访问当前实例的子组件 3.x时，移除了对$ children 的支持，如果需要访问子组件，需要使用$refs

10、自定义指令

3.x 自定义指令的钩子函数更新了，更像组件的生命周期了

11、data 选项

2.x data 允许使用 object 模式定义。

3.x 只接受返回 object 的 function： data() { return { abc: 123 }; }

12、Mixin 合并行为变更

2.x 深层次执行合并，类似 Object.assign

const Mixin = {     data() {  
return {   abc: { 
                a: 1,
                b: 2  
                } 
    } } }  
const CompA = {  mixins: [Mixin],    
    data() {         
        return {   abc: {
        b: 3, 
        c: 4 
        }
       }
       } }

最终输出结果：

abc: { a: 1, b: 3, c: 4 }

相同的写法在 v3.x 则会抛弃混入的变量，保留组件本身属性：

abc: { b: 3, c: 4 }

13、key

<template v-for>的 key 应该设置在<template>标签上 (而不是设置在它的子节点上，vue2.x 必须设置在子节点上才生效)。

14、$listeners

$listeners对象在Vue3中已被移除。现在事件监听器是$ attrs 的一部分，被放在$attrs 对象里

15、过渡类动画

将 .v-enter 字符串实例替换为 .v-enter-from 将 .v-leave 字符串实例替换为 .v-leave-from

16、 v-if 与 v-for 优先级

2.x 同时使用 v-if 和 v-for 时，v-for 会优先作用。 3.x 相反，v-if 总是优先于 v-for 生效。

17、Watch on Arrays

3.x 通过 watch 函数添加 deep: true 可以监控到数据变化

Vue3.0 升级指南