Vue3.x的新特性

安装

# 最新稳定版
$ npm install vue@next

# 最新版本的 @vue/cli：
$ npm install -g @vue/cli@next

import App from "./App.vue";

// vue 2.x
new Vue({
    el: '#app',
    render: (h) => h(App)
});

// vue 3.x
createApp(App).mount("#app");

过滤器filters删除

Filters 已从 Vue 3.0 中删除，不再受支持（建议用方法调用或计算属性替换它们）

Data选项

2.x ：data 选项是 object 或者是 function
3.x ：data 选项已标准化为只接受返回 object 的 function

v-model

prop 和事件默认名称已更改

• prop: value => modelValue
• event: input => update:modelValue

sync 修饰符和组件的 model 选项已移除，可用 v-model 作为代替

NEW：现在可以在同一个组件上使用多个 v-model 进行双向绑定
NEW：现在可以自定义 v-model 修饰符

生命周期

Vue2.x

1. beforeCreate，在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
2. created，在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前尚不可用。
3. beforeMount，在挂载开始之前被调用：相关的 render 函数首次被调用。
4. mounted，实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当mounted被调用时 vm.¥el 也在文档内。
5. beforeUpdate，数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
6. updated，由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
7. activated，被 keep-alive 缓存的组件激活时调用。
8. deactivated，被 keep-alive 缓存的组件停用时调用。
9. beforeDestroy，实例销毁之前调用。在这一步，实例仍然完全可用。
10. destroyed，实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
11. errorCaptured，当捕获一个来自子孙组件的错误时被调用。

Vue 3.x

被替换

1. beforeCreate -> setup()
2. created -> setup()

重命名

1. beforeMount -> onBeforeMount
2. mounted -> onMounted
3. beforeUpdate -> onBeforeUpdate
4. updated -> onUpdated
5. beforeDestroy -> onBeforeUnmount
6. destroyed -> onUnmounted
7. errorCaptured -> onErrorCaptured

新增的

新增的以下2个方便调试 debug 的回调钩子：

1. onRenderTracked
2. onRenderTriggered

特别说明

由于 Vue3.x 是兼容 Vue2.x 的语法的，因此为了保证 Vue2.x 的语法能正常在 Vue3.x 中运行，大部分 Vue2.x 的回调函数还是得到了保留。比如：虽然 beforeCreate 、 created 被 setup() 函数替代了，也就是说在 Vue3.x 中建议使用 setup()，而不是旧的API，但是如果你要用，代码也是正常执行的。
但是，以下2个生命周期钩子函数被改名后，在 Vue3.x 中将不会再有 beforeDestroy 和 destroyed。

1. beforeDestroy -> onBeforeUnmount
2. destroyed -> onUnmounted

Setup()

在vue3组件中的 setup 选项使用 Composition API
setup 是一个函数，它在beforeCreate前执行 ，意味着setup 执行时还没有创建组件的实例，所以this为undefined。也就是除了 props ，你无法去访问组件中声明的任何属性, data/computed/methods等。

参数
props：组件中的props；响应式，当有新的函数传入的时候会自动更新。
context：组件上下文；一个普通的JavaScript的object对象

props

exprot default {
    props: {
        title: String
    },
    setup(props) {
        console.log(props.title) // 响应式
    }
}

注意：
setup中的props不能使用ES6 解构语法，这将会导致自动更新失效
如果一定要解构props，那么需要在setup函数中使用toRefs

import { toRefs, toRef } from 'vue'

setup(props) {
	const { title } = toRefs(props)

	console.log(title.value)

	// 如果title是个可选属性，有时候可能不存在props中，
	// 为防止出现这种情况，需要使用toRef替代toRefs
	const { msg } = toRef(props)
	
	console.log(msg.value)
}

context

// 暴露组件的三个属性：
export default {
  setup(props, context) {
    console.log(context.attrs)
    console.log(context.slots)
    console.log(context.emit)
  }
}

context对象就是普通的JavaScript对象，它不是响应式的，所以可以使用ES6解构语法

export default {
  setup(props, { attrs, slots, emit }) {
    ...
  }
}

setup定义响应式数据（ref, reactive）

通过ref()的方式获取一个响应式的数据，再通过setup返回这些数据
若想获取一个响应式的对象，通过reactive定义一个对象

<template>
  <div class="hello">
    <h1>{{ count }}</h1>
    <button @click="fuc">button1</button>
    <h1>{{obj.name}}</h1>
    <button @click="fucM">button2</button>
  </div>
</template>

import { ref, reactive } from 'vue';
export default {
	setup() {
		const count = ref(0)
		const fuc = () => count.value++

		const obj = reactive({
			name: 'wen'
		})
		return { count , fuc, obj  }
	},
	methods: {
		fucM() {
			this.obj.name = 'mr.wen'
		}
	}
}

页面输出结果
0，点击button1 => 1
wen，点击button2 => mr.wen

< template >

vue2.x 使用template元素时无法在当前标签设置key，且在同一元素上无法同时使用
vue3.x 建议在template元素上设置key

v-if 和 v-for

Vue 3.x 中v-if 和 v-for 可在同一元素使用，v-if优先级高。
但建议尽量不要在同一元素上同时使用，可使用计算属性渲染出列表数据。