vue3快速上手(三)

vue3快速上手三

响应式数据

获取响应式数据,vue3中响应式数据和vue2有了很大差别，使用Proxy来代理对象，深度代理对象中的所有成员，比原来的Object.definePrototype效率提高了，而且还能够让动态添加删除对象成员响应。
vue3中提供了下面一系列的api来获取响应式数据

• reactive
• readonly
• ref
• computed
  其中reactive和readoly返回的是对象代理，而ref和computed返回的是这样格式{value:…}的一个对象

const state = reactive({
    a:1,
    b:2
})
const readState = readonly({
    a:1,
    b:2
})
const readonlyState = readonly(state);
const refState = ref(123);
const compState = computed(()=>{
    console.log('computed')
    return refState.value + "这是一个响应式数据"
})
console.log(state,readState,readonlyState,refState,compState)

注意

• reactive和readyonly参数只能是对象或者reactive对象，ref可以是普通值，所以要想让非对象成为响应式数据需要使用ref
• computed函数不会立即执行，在读取value值时，才会根据情况执行，如果依赖的数据有改变，不会立即让computed执行，而是再读取comp.value时执行computed的getter函数

const compState = computed(()=>{
    console.log('computed')
    return refState.value + "这是一个响应式数据"
})
console.log(refState.value)
console.log("computed数据",compState.value)
console.log("computed数据",compState.value)
console.log("computed数据",compState.value)
console.log("computed数据",compState.value)
refState.value++;
console.log("computed数据",compState.value)
console.log(refState.value)

• readyonly包装的数据是只读的，如果传递的参数是reactive，可以改变reactive的值来改变内部数据，暴露出去只读属性
• readonly包装reactive对象,和reactive对象不相等，reactive包装reactive对象，和原来的对象相等

const state = reactive({
   a:1,
   b:3,
})
const readState = readonly(state);
const state2 = reactive(state);
state === state2//true
state === readState//false

watch和watchEffect

前面已经提过watchEffect了，使用非常方便，会自动收集依赖，依赖数据改变重新执行，watch和watchEffect的功能类似，使用稍微复杂一点，平时开发中大部分场景直接使用watchEffect就行了

watch(countRef, (newValue, oldValue) => {
  // ...
}, options)

• 参数1.watch依赖的数据，数据改变，watch重新执行
• 参数2：watch执行的函数，里面记录了新值和旧值

注意

const state = ref({count:1})
watch(state.count,(newVal,oldVal)=>{
	//do something
)

如果代码写成上面这样，state.count改变，但是并不胡让watch重新执行，因为state.count只是一个普通属性，打印出来是0，要让watch生效，需要替换成一个函数

watch([() => state.count, （old1, old2） => {
  // ...
});

一些API

判断

1. isProxy
2. isReactive
3. isReadyonly
4. isRef

顾名思义，很好理解，要稍微注意点的就是readonly包装的对象，使用isReactive判断是true

console.log(isReactive(readonlyState))//true

转换
1.unref,等同于isRef(val) ? val.value : val
2. toRef，得到一个响应式对象某个属性的ref格式

const state = reactive({
  foo: 1,
  bar: 2
})

const fooRef = toRef(state, 'foo'); // fooRef: {value: ...}

fooRef.value++
console.log(state.foo) // 2

state.foo++
console.log(fooRef.value) // 3. 

3.toRefs,前面讲过

composition API

composition提供的函数很多于组件深度绑定，不能脱离组件而存在,它相比于option api有更好的逻辑复用和代码组织，更好的类型推导

// component
export default {
  setup(props, context){
    // 该函数在组件属性被赋值后立即执行，早于所有生命周期钩子函数
    // props 是一个对象，包含了所有的组件属性值
    // context 是一个对象，提供了组件所需的上下文信息
  }
}

新增