p18(2021.4.14 周三)
1.Composition API简介
-
Composition API 也叫组合式API,是vue3.x的新特性。
-
没有Composition API之前vue相关业务的代码需要配置到option的特定区域(data、methods、computed……),中心型项目是没有问题的,但是在大型项目中会导致后期的维护性比较复杂,同时代码的复用性不高。Vue3.x中的Composition API就是为了解决这个问题而生的。
2.Composition API提供了以下几个函数
setup
ref
reactive
watchEffect
watch
computed
toRefs
3.Composition API定义变量
<h1>vue3新特性</h1>
{{title}}---{{companyInfo}}
import { ref, reactive } from 'vue';
export default {
setup() {
// ref 定义响应式数据 string、number、boolean、array
// reactive 定义响应式数据 定义对象
const title = ref("我是vue3");
const companyInfo = reactive({
name: '公司',
area: 'hz'
});
return {
title,
companyInfo
}
}
}
4.Composition API定义方法 及 对变量的使用
reactive定义的对象可以直接用,但是ref定义的需要.value
setup() {
const getTitle = () => {
console.log(title.value)
}
const getCompanyInfo = () => {
console.log(companyInfo);
}
return {
getTitle,
getCompanyInfo
}
}
5.toRefs —— 解构响应式对象数据
把一个响应式对象转成普通对象,该普通对象的每个 property 都是一个 ref,和响应式对象 property —— 对应。
import { ref, reactive, toRefs } from 'vue';
setup() {
const companyInfo = reactive({
companyName: '公司',
area: 'hz'
});
return {
...toRefs(companyInfo)
}
}
companyName 就是一个响应式数据
<input v-model="companyName" />
{{companyName}}
p19(2021.4.15 周四)
1.computed计算属性
姓:<input v-model="firstName" />
名:<input v-model="lastName" />
姓名:{{fullName}}
import { reactive, toRefs, computed } from 'vue';
setup() {
const userInfo = reactive({
firstName: '',
lastName: ''
});
const fullName = computed(()=> {
return userInfo.firstName + userInfo.lastName
})
return {
...toRefs(userInfo),
fullName
}
}
2.readonly “深层”的制只读代理
把响应式对象改为普通对象
<input v-model="userInfo2.firstName" />
{{userInfo2.firstName}} // 非响应式的
import { reactive, readonly } from 'vue';
setup() {
const userInfo = reactive({
firstName: '',
lastName: ''
});
const userInfo2 = readonly(userInfo)
return {
userInfo2
}
}
3.watchEffect 和 watch
watchEffect:会在第一次就触发
对比watchEffect, watch允许我们:
- 懒执行,也就是说仅在监听的数据变更时才执行回调(第一次不触发)
- 更明确哪些状态的改变会触发侦听器重新运行(obj)
- 访问侦听状态变化前后的值(newVal, oldVal)
<p>num:{{num}}</p>
<p>count:{{count}}</p>
import { reactive, toRefs, watchEffect , watch} from 'vue';
setup() {
const obj = reactive({
num: 1,
count: 1
});
watchEffect(()=> {
//console.log(`num=${obj.num}`) // 由于num++,所以会一直触发
console.log(`num=${obj.count}`) // 只会触发第一次
})
// 监听整个obj对象,由于num++,整个对象一直在改变,所以会一直触发
watch(obj, (newVal, oldVal)=> {
console.log(`watch: num=${obj.count}`)
})
setInterval(() =>{
obj.num++
}, 1000)
return {
...toRefs(obj)
}
}
4.生命周期函数
因为setup是围绕beforeCreate和created生命周期钩子运行的,所以不需要显示的定义他们,换句话说,在这些钩子中编写的任何代码都应该直接在setup函数中编写。
beforeCreate X
created X
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeUnmount onBeforeUnmount
unmounted onUnmounted
errorCaptured onErrorCaptured
renderTracked onRenderTracked
renderTriggered onRenderTriggered
import { onMounted } from 'vue';
setup() {
onMounted(() => {
console.log("onMounted")
})
}
5.接收父组件的传值props
export default {
props: ['msg'],
setup(props) {
console.log("props");
}
}
p20(2021.4.18 周六)
1.provide / inject
从父组件传递数据到子组件,使用props。如果有一些深嵌套的组件,而我们只需要来自深嵌套子组件中父组件的某些内容,就可以使用provide / inject
,父组件有一个provide选项来提供数据,inject选项来开始使用这个数据。
2.vue2和vue3中 provide / inject区别
vue2:父组件的数据改变后,不会影响子组件的数据(基本类型的不会相互影响,但是引用类型的会相互影响)
vue3:父组件的数据改变后,直接影响子组件的数据(基本类型、引用类型都会)
3.非组合式api中的写法
父组件:
<template>
<provide-demo />
</template>
<script>
import ProvideDemo from './ProvideDemo.vue';
export default {
provide() {
return {
userInfo: this.userInfo
}
},
data() {
return {
userInfo: {
name: '张三',
age: ''
},
}
}
}
</script>
子组件:ProvideDemo.vue
<template>
<div>
<p>{{userInfo}}</p>
</div>
</template>
<script>
export default {
inject: ['userInfo'],
}
</script>
4.组合式api中的写法
父组件:
<template>
<div>
<p>{{provideTitle}}</p>
<input v-model="provideTitle" />
<provide-demo />
</div>
</template>
<script>
import { ref, provide } from 'vue';
import ProvideDemo from './ProvideDemo.vue';
export default {
setup() {
const provideTitle = ref("我是根组件的title");
provide("provideTitle", provideTitle);
return {
provideTitle
}
}
}
</script>
子组件:ProvideDemo.vue
<template>
<div>
<p>vue3--provide:{{provideTitle}}</p>
</div>
</template>
<script>
import { inject } from 'vue'
export default {
setup() {
const provideTitle = inject("provideTitle");
return {
provideTitle
}
}
}
</script>