记录一下vue3.0与2.0简单使用上的区别

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。例如：

  
  {{ myText}}

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: ``
})

app.mount('#app')

  
  {{ myText}}

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: ``
})

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()。