目录
-
data的区别
-
非兼容:组件选项
data
的声明不再接收纯 JavaScriptobject
,而是接收一个function
。 -
非兼容:当合并来自 mixin 或 extend 的多个
data
返回值时,合并操作现在是浅层次的而非深层次的 (只合并根级属性)。
在 2.x 中,开发者可以通过 object
或者是 function
定义 data
选项。
<!-- Object 声明 -->
<script>
const app = new Vue({
data: {
apiKey: 'a1b2c3'
}
})
</script>
<!-- Function 声明 -->
<script>
const app = new Vue({
data() {
return {
apiKey: 'a1b2c3'
}
}
})
</script>
在 3.x 中,data
选项已标准化为只接受返回 object
的 function
。
使用上面的示例,代码只可能有一种实现:
<script>
import { createApp } from 'vue'
createApp({
data() {
return {
apiKey: 'a1b2c3'
}
}
}).mount('#app')
</script>
推荐使用
-
钩子函数
vue3的钩子函数只能再setup中调用,components和watch除外
具体可参考:
-
this的区别
setup 在生命周期 beforecreate 和 created 前执行,此时 vue 对象还未创建,因无法使用我们在 vue2.x 常用的 this。
vue3提供了getCurrentInstance ,通过这个属性,找到全局属性globalProperties
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
const _this= instance.appContext.config.globalProperties
-
scss用法区别
vue3的深度选择器不再是::v-deep而是:deep(.class)
按照vu2的写法会报错
::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.
原因新的vue3.0 单文件规范::v-deep写法已经被废弃了
修改成 如下写法,不要加空格
:deep(.el-divider) {
margin: auto 16px;
width: 1px;
height: 10px;
background: #cccccc;
border-radius: 0px 0px 0px 0px;
opacity: 1;
.el-divider--horizontal {
border: none;
}
}
-
slot插槽的使用
vue 3.x 增加了v-slot的指令来代替原来2.6的slot,slot-scope属性
原因:这里引用了官方的说法,我们计划统一插槽类型,因此不再需要(从概念上)区分作用域插槽和非作用域插槽。一个插槽可能会或可能不会接收道具,但它们全都是插槽。有了这个概念上的统一,具有slot
和slot-scope
在两个特殊属性似乎没有必要,这将是很好的统一语法的单个构建下也是如此(统一插槽属性,便于学习)
在子组件中:
<template>
<div>
<div>这是一个组件就哈哈哈哈</div>
<!-- 不具名插槽的使用 -->
<div>
<slot>这是原来的插槽呀1</slot>
</div>
<!-- 具名插槽的使用 -->
<div>
<slot name="myslot">这是原来的插槽呀2</slot>
</div>
<!-- 具名插槽缩写: -->
<div>
<slot name="myslotsx">这是原来的插槽呀3</slot>
</div>
<!-- 父级组件决定插槽内容的渲染方式 -->
<div>
<slot name="header" age="18">这是原来的插槽呀4hhhhhh</slot>
</div>
<div>
<slot name="footer" :list="list">这是原来的插槽呀5</slot>
</div>
</div>
</template>
<script lang="ts">
import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated } from "vue";
export default defineComponent({
name: "myComponent",
components: {},
setup() {
const state = reactive({
list: [
{ name: "桃子", price: 5 },
{ name: "苹果", price: 8 },
{ name: "梨", price: 9 },
],
});
// 页面加载时
onMounted(() => {});
return {
...toRefs(state),
};
},
});
</script>
父组件中
<my-component>
<!-- 不具名插槽的使用 -->
<template v-slot> 不具名插槽的使用</template>
<!-- 具名插槽的使用 -->
<template v-slot:myslot>具名插槽的使用 </template>
<!-- 具名插槽缩写:#vslot -->
<template #myslotsx>具名插槽缩写:#vslot</template>
<!-- 父级组件决定插槽内容的渲染方式 -->
<template #footer="slotData">
<div v-for="(item, index) in slotData.list" :key="index">
{{ item.name }}的价格时{{ item.price }}
</div>
</template>
</my-component>
页面显示:
参考文章:
Vue的进化——Vue3与Vue2在应用中的区别 - MK24 - 博客园