1.computed计算属性
2.watch监视函数
3.watchEffect函数
4.Vue的生命周期函数
一.computed计算属性
- 计算属性简写和完整写法
<template>
<h1>一个人的信息</h1>
姓：<input type="text" v-model="person.firstName" /><br />
名：<input type="text" v-model="person.lastName" />
<span>全名：{{ person.fullName }}</span>
<br />
全名：<input type="text" v-model="person.fullName" />
</template>
<script>
import { reactive, computed } from 'vue'
export default {
name: 'Demo',
// 数据
setup () {
let person = reactive({
firstName: '陈',
lastName: '玉'
})
// 简写
person.fullName = computed(() => {
return person.firstName + '-' + person.lastName
})
//计算属性 -- 完整写法
person.fullName = computed({
get () {
return person.firstName + '-' + person.lastName
},
set (value) {
const name = value.split('-')
person.firstName = name[0]
person.lastName = name[1]
}
})
return {
person
}
}
}
</script>
<style>
</style>
二.watch监视函数
2.1 监视情况分类
情况① 监视ref定义的响应式数据: 第一个参数是监视的数据，第二个参数是一个回调函数
immediate:一上来就执行，放到第三个参数中
watch(sum, (newValue, oldValue) => {
console.log('sum的值变了', newValue, oldValue)
}, { immediate: true })情况② 监视多个ref定义的响应式数据
watch([sum, msg], (newValue, oldValue) => {
console.log('sum或者msg的值变了', newValue, oldValue)
}, { immediate: true })情况③ 监视reactive所定义的全部属性
注意：
-
此处无法正确的获取oldValue
-
强制开启了深度监视，deep属性设置为false无效
watch(person, (newValue, oldValue) => {
console.log('person的值变化了')
}, { deep: false })情况④ 监视reactive所定义的响应式数据中的某一个属性
watch(() => person.age, (newValue, oldValue) => {
console.log('person的值变化了', newValue, oldValue)
})情况⑤ 监视reactive所定义的响应式数据中的某些属性
watch([() => person.name, () => person.age], (newValue, oldValue) => {
console.log('person的值变化了', newValue, oldValue)
})情况⑥ 监视的是 reactive 定义对象中的某个属性，deep是有效的
watch(() => person.job, (newValue, oldValue) => {
console.log('person的值变化了', newValue, oldValue)
}, { deep: true })watch监视整个代码
<template>
<h2>当前求和为:{{ sum }}</h2>
<button @click="sum++">点我+1</button>
<hr />
<h2>当前的信息为:{{ msg }}</h2>
<button @click="msg += '!'">修改信息</button>
<hr />
<h2>姓名：{{ person.name }}</h2>
<h2>年龄：{{ person.age }}</h2>
<h2>薪资：{{ person.job.j1.salary }}</h2>
<button @click="person.name += '~'">修改姓名</button>
<button @click="person.age++">增长年龄</button>
<button @click="person.job.j1.salary++">涨薪</button>
</template>
<script>
import { reactive, ref, watch } from 'vue'
export default {
name: 'Demo',
// 数据
setup () {
let sum = ref(0)
let msg = ref('你好')
let person = reactive({
name: '张三',
age: 18,
job: {
j1: {
salary: 20
}
}
})
// 情况1 监视ref定义的响应式数据
// watch(sum, (newValue, oldValue) => {
// console.log('sum的值变了', newValue, oldValue)
// }, { immediate: true })
// 情况2 监视ref定义的响应式数据
// watch([sum, msg], (newValue, oldValue) => {
// console.log('sum或者msg的值变了', newValue, oldValue)
// }, { immediate: true })
// 情况3 监视reactive所定义的全部属性
// 1.注意：此处无法正确的获取oldValue
// 2.注意：强制开启了深度监视（deep属性设置为false无效）
watch(person, (newValue, oldValue) => {
console.log('person的值变化了')
}, { deep: false })
// 情况四：监视reactive所定义的响应式数据中的某一个属性
// watch(() => person.age, (newValue, oldValue) => {
// console.log('person的值变化了', newValue, oldValue)
// })
// 情况5：监视reactive所定义的响应式数据中的某些属性
// watch([() => person.name, () => person.age], (newValue, oldValue) => {
// console.log('person的值变化了', newValue, oldValue)
// })
// 情况6（特殊）：监视的是 reactive 定义对象中的某个属性，deep是有效的
// watch(() => person.job, (newValue, oldValue) => {
// console.log('person的值变化了', newValue, oldValue)
// }, { deep: true })
return {
sum,
msg,
person
}
}
}
</script>
<style>
</style>
2.2 监视ref参数数据时需要注意的问题
① 监视ref基本数据类型的时候不需要加value
let sum = ref(0)
let msg = ref('你好')
let person = ref({
name: '张三',
age: 18,
job: {
j1: {
salary: 20
}
}
})
watch(sum, (newValue, oldValue) => {
console.log('sum被修改了', newValue, oldValue)
})② 监视ref修饰的对象类型的时候，需要加value(相当于监视的是ref生成的reactive对象)
watch(person.value, (newValue, oldValue) => {
console.log('person被修改了', newValue, oldValue)
})如果不写.value,就加深度监视
watch(person, (newValue, oldValue) => {
console.log('person被修改了', newValue, oldValue)
}, { deep: true })三.watchEffect函数
- watch函数既要指明监视的属性，也要指明监视的回调
- watchEffect函数不需要指明哪个属性，监视的回调中用到哪个属性，就监视哪个属性
- watchEffect函数所指定的回调中的数据只要发生变化，则直接重新执行回调
- watchEffect 有点像computed，但是computed注重计算出来的值，所以必须要写返回值
- watchEffect更注重的是过程，所以不用写返回值
watchEffect(() => {
const x1 = sum.value
const x2 = person.job.j1.salary
console.log('watchEffect所指定的回调执行了')
})四.Vue3 的生命周期函数
① Vue3.0中可以继续使用Vue2.X中的生命周期钩子，但是有两个被更名
- beforeDestroy改名为beforeUnmount
- destroyed改为unmounted
② Vue3.0可以通过配置项的形式使用生命周期钩子
beforeCreate () {
console.log('---beforeCreate---')
},
created () {
console.log('---created---')
},
beforeMount () {
console.log('---beforeMount---')
},
mounted () {
console.log('----mounted---')
},
beforeUpdate () {
console.log('---beforeUpdate---')
},
updated () {
console.log('---updated---')
},
beforeUnmount () {
console.log('---beforeUnmount---')
},
unmounted () {
console.log('---unmounted---')
}③ Vue3.0提供了组合式API形式的生命周期钩子，与Vue2.x中钩子的对应关系如下
- beforecreate => setup()
- created => setup()
-
beforeMount => onBeforeMount
-
mounted => onMounted
-
beforeUpdate => onBeforeUpdate
-
updated => onUpdated
-
beforeUnmount => onBeforeUnmount
-
unmounted => onUnmounted
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
export default {
name: 'Demo',
// 数据
setup () {
let sum = ref(0)
onBeforeMount(() => {
console.log('---onBeforeMount---')
})
onMounted(() => {
console.log('---onMounted---')
})
onBeforeUpdate(() => {
console.log('---onBeforeUpdate---')
})
onUpdated(() => {
console.log('---onUpdated---')
})
onBeforeUnmount(() => {
console.log('---onBeforeUnmount---')
})
onUnmounted(() => {
console.log('---onUnmounted---')
})
return {
sum
}
//
}
