【Vuejs】802- 如何區(qū)別 Vue2 和 Vue3 ？

1. Vue 3 的 Template 支持多個根標簽，Vue 2 不支持
2. Vue 3 有 createApp()，而 Vue 2 的是 new Vue()
   createApp(組件)，new Vue({template, render})
3. v-model代替以前的v-model和.sync
   vue3中v-model的用法

要求:
3.1. props屬性名任意，假設(shè)為x
3.2. 事件名必須為"update:x"
效果：

"y"?@update:value="y=$event"/>
vue2中的寫法
"y"/>
vue3中的寫法
"y"/>

4. context.emit

新增context.emit，與this.$emit（vue3中只能在methods里使用）作用相同

• context.emit用法

import?{SetupContext?}?from?'vue'
setup(props:?Prop,?context:?SetupContext)?{
????const?toggle?=?()?=>?{
??????context.emit('input',?!props.value)
????}
????return?{toggle}
}

5. Vue3中的屬性綁定

默認所有屬性都綁定到根元素
使用inheritAttrs: false可以取消默認綁定
使用attrs或者context.attrs獲取所有屬性
使用v-bing="$attrs"批量綁定屬性
使用 const {size, level, ...rest} = context.attrs 將屬性分開

5.1 使用場景
在vue2中我們在父組件綁定click事件，子組件必須內(nèi)部觸發(fā)click，而vue3中在父組件綁定子組件的根元素上也會跟著綁定

• ButtonDemo.vue

????<Button?@click="onClick"?@focus="onClick"?size="small">你好Button>
??</div>
setup()?{
??????const?onClick?=?()?=>?{
????????console.log("aaa")
??????}
??????return?{onClick}
????},

• Button.vue