|Vue3.0高阶实战：开发高质量音乐Web app( 三 )

state

监听多个数据写法
setup(props context) <{p>let count=ref(1)
let countTwo=ref(2)
【|Vue3.0高阶实战：开发高质量音乐Web app】let state = reactive(<{p>stateSon: 1
stateDaughter: 2
)
//监听reactive类型
watch(
[ () => state.stateSon () => state.stateDaughter
//需要被监听的数据
，
([sonNewVlaueaughterNewVlaue
， [sonOldVlaueaughterOldVlaue
) => { //参数1为新值，参数2为旧值
console.log('回调函数触发了') //数据变化后执行的回调函数

{lazy：false//首次创建是否监听
)
//监听ref类型
watch([countcountTwo
， ([countNewVlauecountTwoNewVlaue
， [countOldVlauecountTwoOldVlaue
) => {//参数1为新值，参数2为旧值
console.log('回调函数触发了') //数据变化后执行的回调函数
)
return <{p>count
countTwo
state

生命周期变化
在Vue3.0中生命周期也是按照2.0写法进行调用，在基础上又进行了优化可以按需进行导入在setup()函数中进行调用
但是需要注意的是created()和beforeCreated()生命周期无法在setup()函数中进行使用他们执行之间在setup()函数之前
import { onBeforeMount onMounted updatedfrom '@vue/composition-api'
setup () <{p>onBeforeMount(() => <{p>console.log('onBeforeMount生命周期被调用了')
)
onMounted(() => <{p>console.log('onMounted生命周期被调用了')
)
updated(() => <{p>console.log('updated生命周期被调用了')
)

响应式数据实现的改变
Vue2.0是通过Object.defineProperty进行数据劫持给每个数据加上set和get方法同时在数据的get()方法触发时进行更新函数依赖的收集，在数据的set()触发时循环遍历调用收集起来的更新函数进行视图的更新来实现数据响应式 Vue3.0中通过实现Proxy(代理)和Reflect(映射)来实现数据响应式，完美解决Vue2.0响应式一些弊端：如对象或者数组新增属性无法实现响应式需要手动进行添加、数组实现响应式需要额外进行处理、响应式数据过多性能问题(因为Vue3.0中实现响应式时进行了懒执行优化不管数据有多大只要用户不访问，就不会进行响应式处理)
computed()计算属性的变化
vue2.0中计算属性是只读的不能进行更改，但是在3.0中computed可以进行值的修改
setup () <{p>const count = ref(1)
const computedDate= computed(() => count.value + 1) //不允许修改返回count的值+1
const computedDateTwo= computed(<{p>get:() =>count.value + 666
set: (value) => count.value = https://mparticle.uc.cn/api/value
)
// addCount2.value = https://mparticle.uc.cn/api/123//赋值方法
return <{p>count
computedDate
computedDateTwo

Vue3.0中移除的部分属性
this.$refs.xxx Vue3.0移除了通过此方法进行组件实例的绑定但是新的写法就是通过ref(null)进行绑定写法如下
<template>
<demo> 常规使用 </demo>
<div>
<zuiMengForm :model=\"formModel\" :rules=\"rules\" ref=\"ceShiForm\">
<zuiMengFormItem lable=\"密码\" @click=\"clickCeShi\" prop=\"password\">
< formModel.password >
</zuiMengFormItem>
</zuiMengForm>
</div>
</template>
setup()<{p>const ceShiForm = ref(null);
const clickCeShi = () => <{p>ceShiForm.value.validate();
;

this.$emit
this.$on这两个属性方法在Vue中被移除了Vue3.0中认为这个不是vue应该做的事情就直接移除了，想要在继续使用这两个方法需要进行第三方差劲进行使用