vue3.0初探

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