1.关于v-model
- 默认情况下,组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。
- 多个v-model,新增了多个v-model的使用场景
<user-name
v-model:first-name="firstName"
v-model:last-name="lastName"
></user-name>
app.component('user-name', {
props: {
firstName: String,
lastName: String
},
emits: ['update:firstName', 'update:lastName'],
template: `
<input
type="text"
:value="firstName"
@input="$emit('update:firstName', $event.target.value)">
<input
type="text"
:value="lastName"
@input="$emit('update:lastName', $event.target.value)">
`
})
- v-model支持自定义修饰符
2.全局 Vue API 已更改为使用应用程序实例
2.x的vue中绑定全局变量
Vue.prototype = ‘’;
3.x的vue
替换成了// after - Vue 3
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}
- 之前的全局api都是通过vue.use,vue.directive等等,
vue 3.x是通过app调用的
const app = createApp(MyApp)
app.use(VueRouter)
3.支持多应用
import { createApp } from 'vue'
import Foo from './Foo.vue'
import Bar from './Bar.vue'
const createMyApp = options => {
const app = createApp(options)
app.directive('focus' /* ... */)
return app
}
createMyApp(Foo).mount('#foo')
createMyApp(Bar).mount('#bar')
4 2.x版本v-for比v-if先生效,3.x版本中v-if先生效,v-for后生效
5 废除过滤器属性,文件内的过滤器建议使用计算属性和方法完成,全局内的过滤器,建议使用$filters属性,给$filters属性添加属性及方法。
6 废除$on,$off等api,意味着event bus等方法废除,官网文档建议使用第三方库完成。
7 Vue 3 中,所有的函数式组件都是用普通函数创建的
8.$nextick替换
import { nextTick } from 'vue'
nextTick(() => {
// 一些和DOM有关的东西
})
9 vue 3.x中不必显示的声明key,因为vue会自动为每个节点生成一个key。 vue 2.x 中不能在template上使用key,但是vue3.x中可以在template上使用key。
10 vue 3.x没有作用域插槽
11 新增了teleport
12 新增了composition api
13 新增了watchEffect