记录一下复习的vue3的基本写法

vue3的两大响应式系统

ref

1. 获取的是RefImpl类（vue内部定义的类）也叫ref对象
2. ”RefImpl.value“属性中存储着状态的值，在js中可以获取到，写法就是“RefImpl对象.value”
3. 对value属性基于Objetc.definedPropery进行了get/set的劫持，为了以后修改RefImpl对象的value值的时候，可以让视图更新
4. 如果实在渲染模版template中使用ref对象，不需要+ .value，在视图渲染过程中，如果发现是RefImp对象，就会自动去取他的value值

recative

1. 会返回一个基于ES6中的Proxy进行劫持的对象：get/set/deleteProperty/has/ownKeys,并且实现的深度劫持，对数组的每一项都做了劫持 「后期修改删除状态值，会更新视图」
2. state.XXX 可以获取状态值
3. 一般写法是利用toRef或者toRefs把state中某个状态或者所有的状态都转为Refmpl对象，这样写起来会比较舒服一点，在视图中写的时候就不需要写成state.xxx了，直接xxx就可以

普通方法「对比vue2中的methods」

直接写在setup中，并且由于setup的构建甚至是位于beforecreate生命周期函数之前的，并没有任何的data数据，所有也就不存在this，因此可以直接使用箭头函数，这也就意味着，任何vue2中有关this的语法，在setup中都不能使用，这是vue2和vue3的一大区别

计算属性

监听器函数

watchEffect([callback])

1. callback中用到了的那些状态，自动会建立起依赖，当依赖的值改变，会重新执行callback
2. 第一次渲染的时候会直接执行watchEffect

watch

1. 默认第一次不执行「加immediate可以设置立即执行」，而且只是浅度监听「+ deep可以设置深度监听」
2. watch(state,(prev,next)=>{})监听state中所有的状态，如果有状态改变则执行callback
3. 如果监听某一个状态的值，第一个参数需要写成函数 watch(()=>state.xxx,(prev,next)=>{})
4. 如果是监听RefImpl对象，不需要写成函数 watch(RefImpl,(prev,next)=>{})