Vue 2 和vue 3 最小化不同
render 参数h
Vue2:
render(h) {
Let obj = {};
obj.style = {
width: this.elWidth,
};
obj.attrs = {
type: this.nativeType,
disabled: this.disabled
};
obj.on = {
click: this.handleClick
};
return h(
"kui-tooltip",
obj,
content
);
}
Vue3: obj属性平铺，使用 resolveComponent创建组件元素
Import {h, resolveComponent} from "vue"
render() {
Let obj = {};
obj.style = {
width: this.elWidth,
};
obj= {
type: this.nativeType,
disabled: this.disabled,
onClick: this.handleClick,
...obj
};
Const el = resolveComponent("kui-tooltip")
return h(
el,
obj,
content
);
}
**Emit**
Vue2:
this.$emit("click", this.data, event, this);
Vue3: 添加emits这个属性
emits: ["click"]
this.$emit("click", this.data, event, this);
**$** **scopedSlots**
Vue2:
this.$scopedSlots.default()
Vue3: 无此属性
this.$slots.default()
**$** **options**
Vue2:
this.$options.propsData.size
Vue3:
this.$options.props.size
**$** **set**
Vue2:
this.$set(this.items[i], "visible", true);
Vue3: 无此属性
this.item[i].visible = true;
**v-model**
Vue2:
props: {
value: {}
}
this.$emit("input",val)
Vue3:
props: {
modelValue: {}
}
this.$emit("update:modelValue",val)
**Transition**
Vue2:
h("transition",
{
attrs: {
name: this.transition === true ? "el-zoom-in-center" : this.transition
}
},
[
this.tagEl
]
);
Vue3:
import {Transition} from "vue";
h(Transition,
{
name: this.transition === true ? "el-zoom-in-center" : this.transition
},
{
default: () => this.tagEl
}
);
$listeners
Vue2:
<input type="text" v-bind="$attrs" v-on="$listeners"/>
Vue3: 无此属性，全部挪到$attrs
<input type="text" v-bind="$attrs"/>
Vue.prototype
Vue2:
Vue.prototype.$icon = icon;
Vue3:
app.config.globalProperties.$icon = icon
new Vue
Vue2:
new Vue({
router: router,
render: h => h(App)
}).$mount("#app");
Vue3:
import { createApp} from 'vue'
const app = createApp(App)
app.mount('#app')
Vue.nextTick
Vue2:
Vue.nextTick(() =>{})
Vue3:
import { nextTick} from 'vue'
nextTick(() =>{})
V- for中的 ref 数组
Vue2:
<div v-for="item in list" :ref="setItemRef"></div>
<div v-for='item in list' ref='itemRef'></div>
Vue3:
<div v-for='item in list' :ref='itemRef'></div>
export default{
data() {
return {
item: []
};
},
methods: {
itemRef(el) {
if(el){
this.item.push(el)
}
}
}
}
.sync
Vue2:
<div type="text" v-bind:title.sync="title"/>
Vue3: 用v-model代替
<div type="text" v-model="title"/>
注意：vue-router、vuex也都有3.0版本的，具体参考官方文档