1、创建实例方式不同：2.0 使用构造函数new Vue的方式，将选项对象通过参数传入；3.0 使用Vue.createApp()静态方法创建。参数依然是选项多先发。2.0 使用符。
2、定义指令、组件等方法的不同： 2.0 定义指令和组件等是通过Vue的静态方法Vue.component()或者Vue.directive()等；3.0将静态方法改为了实例的方法app.component(),app.directive().
3、生命周期不同：2.0生命周期3个阶段:
- 创建阶段：beforeCreate、created、 beforeMount、 mounted
- 更新阶段：beforeUpdate、updated
- 销毁阶段：beforeDestroy、destroyed
3.0生命周期3个阶段： - 创建阶段：beforeCreate、created、beforeMount、mounted
- 更新阶段：beforeUpdate、updated
- 卸载阶段(在调用app.unmount()时触发)：beforeUnmount、unmounted
4、自定义事件不同：2.0中不存在事件校验；3.0添加验证抛出事件。
emits: {
// 没有验证
click: null,
// 验证submit 事件，接收参数为事件函数接收的参数
submit: ({ email, password }) => {
if (email && password) {
return true
} else {
console.warn('Invalid submit event payload!')
return false
}
}
}
5、v-model不同：
- 组件v-model参数，组件上可以添加v-model参数，如v-model="foo"，使用$emit('update:foo', 'aaa')触发更新，作用和.sync修饰符一样。3.0则不再支持.sync修饰符, 改为v-model。
- 3.0的v-model参数可以绑定多个， 每个 v-model 将同步到不同的 prop，而不需要在组件中添加额外的选项。
- v-model内置修饰符支持.trim, .number, .lazy，还可以自定义修饰符。v-model的自定义修饰符会通过名为modelModifiers的prop传递给组件。如：v-model.uppercase="msg"，则默认绑定prop为modelValue，自定义修饰符为modelModifiers；若绑定的属性存在名称，则自定义修饰符是通过prop+"Modifiers"来命名的，如：v-model:test.uppercase="msg",则prop绑定为test，以及自定义属性绑定为testModifiers。例如：
<!-- v-model.uppercase -->
<div>
<my-component v-model.uppercase="myText" />
{{ myText}}
</div>
const app = Vue.createApp({
data() {
return {
myText: 'test'
}
}
})
app.component('my-component', {
props: {
modelValue: String,
modelModifiers: {
default: () => ({})
}
},
methods: {
emitValue(e) {
let value = e.target.value
if (this.modelModifiers.uppercase) {
value = value.toUpperCase()
}
this.$emit('update:modelValue', value)
}
},
template: `<input
type="text"
:value="modelValue"
@input="emitValue">`
})
app.mount('#app')
<!-- v-model:test.uppercase -->
<div>
<my-component v-model:test.uppercase="myText" />
{{ myText}}
</div>
const app = Vue.createApp({
data() {
return {
myText: 'test'
}
}
})
app.component('my-component', {
props: {
test: String,
testModifiers: {
default: () => ({})
}
},
methods: {
emitValue(e) {
let value = e.target.value
if (this.testModifiers.uppercase) {
value = value.toUpperCase()
}
this.$emit('update:test', value)
}
},
template: `<input
type="text"
:value="test"
@input="emitValue">`
})
app.mount('#app')
6、异步组件的一些对象参数发生变化
7、自定义指令不同
2.0 指令的钩子函数：
- bind： 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
- update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
- componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind：只调用一次，指令与元素解绑时调用。
3.0指令的钩子函数： - beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。在这里你可以做一次性的初始化设置。
- mounted：在挂载绑定元素的父组件时调用。
- beforeUpdate：在更新包含组件的 VNode 之前调用。
- updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。
- beforeUnmount：在卸载绑定元素的父组件之前调用。
- unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。
8、vue3.0新增teleport
9、响应式原理变化：2.0使用Object.defineProperties()和发布订阅者模式。3.0使用Proxy。
10、声明响应式状态：3.0使用reactive，2.0使用Vue.observable()。
网友评论