这里写自定义目录标题
vue3.0常用属性
一、安装
csdn
<script src="https://unpkg.com/vue@next"></script>
npm
在用 Vue 构建大型应用时推荐使用 npm 安装[1] 。NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。Vue 还提供了编写单文件组件的配套工具。
# 最新稳定版
$ npm install vue@next
二、生命周期
3.0生命周期
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
setup 是 Composition API 的核心,能够说也是整个 Vue3.x 的核心。
setup 就是将 Vue2.x 中的 beforeCreate 和 created 代替了,以一个 setup 函数的形式,能够灵活组织代码了。
beforeCreate -> setup()
created -> setup()
export default({
setup () {
onMounted(() => {
})
return {}
}
})
三、响应式数据(ref、reactive)
1. reactive:
被 reactive 方法包裹后的对象就变成了一个代理对象,也就能够实现页面和数据之间的双向绑定了。
这个包裹的方法是 deep 的,对全部嵌套的属性都生效。
<template>
<div>
<p>普通数据:{{ obj1.cnt }}</p>
<p>响应式数据:{{ obj2.cnt }}</p>
</div>
</template>
<script>
import { reactive } from 'vue'
setup() {
// 普通对象
const obj1 = {
cnt: 1
}
// 代理对象(这种方式定义的数据可在页面上实时变化)
const obj2 = reactive({
cnt: 1
})
obj1.cnt++
obj2.cnt++
return {
obj1,
obj2
}
}
</script>
2. ref方法
被 ref 方法包裹后的 元素 就变成了一个代理对象,这里的元素参数指 基本元素 或者称之为 inner value,如:number, string, boolean,null,undefied 等,object 通常不使用 ref,而是使用上文的 reactive。
<template>
<div>
<p>{{ num}}</p>
</div>
</template>
<script>
import { reactive } from 'vue'
setup() {
// 代理对象
const num = ref(1)
return {
num
}
}
</script>
四、computed的用法
let num = ref(1)
const text = computed(() => {
return num.value
})
computed还有get、set方法
let firstName = ref('zhang')
let lastName = ref('hai')
const fullName = computed({
get: () => firstName.value + lastName.value,
set: (val) => {
firstName.value = val
}
})
fullName.value = 'Lin'
五、父子组件通信
子组件:my-child
<template>
<div @click="onChange">给父组件传递事件</div>
</template>
<script>
import { ref } from 'vue'
export default{
setup(props, { emit }){
let onChange = () => {
emit('change', "我是子组件的事件") // 子组件触发事件
}
let startTime = ref(null)
let changeDate = () => {
startTime.value = "2021-10-11"
}
return {
onChange
}
}
}
</script>
- 使用场景1:父组件接收子组件事件
<template>
<my-child @change="receiveMes"></my-child>
</template>
<script>
import myChild from './my-child.vue'
export default{
components:{ myChild },
setup(props, { emit }){
let receiveMes= (e) => {
console.log(e)
}
return {
receiveMes
}
}
}
</script>
- 使用场景2:父组件调用子组件方法
<template>
<my-child ref="childDom"></my-child>
</template>
<script>
import { ref } from 'vue'
import myChild from './my-child.vue'
export default{
components:{ myChild },
setup(props, { emit }){
let childDom = ref(null) //获取子组件
childDom.value.changeDate()
return {}
}
}
</script>
六、watch的用法
监听props对象:
export default{
props:{
dataProvider
}
setup(props, { emit }){
watch(() =>props.dataProvider,(newVal, oldVal)=>{
//do something
})
return {}
}
}
深度监听
export default{
props:{
dataProvider
}
setup(props, { emit }){
watch(() =>props.dataProvider,(newVal, oldVal)=>{
//do something
}, { deep:true })
return {}
}
}
监听响应式对象:
export default{
setup(props, { emit }){
let count = ref(1)
watch(count,(newVal, oldVal)=>{
//do something
})
return {}
}
}
监听多个对象:
import { ref, reactive} from 'vue'
export default{
props:{
dataProvider
}
setup(props, { emit }){
let startTime = ref(null)
let tab = reactive({
datas:null,
selTab: null
})
let getData = () => {
return '1111'
}
//写法1
watch(() => {
return [startTime.value, tab.selTab]
},(val,prev) => {
getData ()
})
//写法2
watch([startTime.value, tab.selTab],(val,prev)=>{
getData ()
})
return {}
}
}
七、slot传参
1. 不具名插槽传参
子组件:
<template>
<div>
<h4>子组件</h4>
<slot :sName="name"></slot>
</div>
</template>
父组件:
<div>
<h3>父组件</h3>
<testChild>
<template v-slot="dataDefalut">//默认插槽
{{dataDefalut.sName}}
</template>
</testChild>
</div>
2. 具名插槽传参
子组件
<template>
<div>
<h4>子组件</h4>
<slot name="test" :list2="list2"></slot>
</div>
</template>
父组件
<div>
<h3>父组件</h3>
<testChild>
<template v-slot:test="data">//具名插槽,v-slot: +插槽名+ ="自定义数据名",子组件所传参数都是其属性
<ul>
<li v-for="item in data.list2">{{item.name}}</li>
</ul>
</template>
</testChild>
</div>
八、DOM元素获取
<template>
<div ref="containerDOM">DOM元素获取</div>
</template>
<script lang="ts">
import { ref} from 'vue'
export default{
props:{
dataProvider
}
setup(props, { emit }){
let containerDOM= ref(null)
//使用的时候写成 containerDOM.value
return { containerDOM }
}
}
</script>
九、路由获取
<script>
import { getCurrentInstance } from 'vue'
export default {
setup () {
const { ctx } = getCurrentInstance()
let value = ctx.$router.currentRoute.value
console.log(value)
}
}
</script>
Vue 3.0 中通过 getCurrentInstance 方法获取当前组件的实例,然后通过 ctx 属性获得当前上下文