Vue Composition API 理解（一）
Composition API——用户层面
Vue 框架
使用hook ->组合起来->Vue3.0 Composition API框架设计模式
e.g. watch - { watch,onMounted,computed } from 'vue‘;
{}里面的是hooks钩子,在 set up（） 中使用
基本按照文档顺序，会记录一些不熟或新功能点
Composition API: setup() | Vue.js (vuejs.org)
setup()
1. .value is no need
2 return ender function() ;不使用
3. set up(props)
- 响应式
setup(props){ watchEffect(()=>{ console.log(props.title); }) //改变前后执行2次 watch(()=> props.title,(newValue)=>{ console.log(newValue); }) //改变后执行1次 }
- 不要解构，否则失去响应式
4.
setup(props, ctx )ctx 打印出
plus
reactive
1.无this
2.
const proxy0bj = reactive({ a: 1, b: 2 }); console.log(proxy0bj);
使用响应式对象，不使用原对象
2.
console.log( count); const obj = ref({ a:1, b:2 }); console.log(obj);
3.
const count = ref(0); const state = reactive({ count }) state.count=1; console.log(state.count)//1
4.存放Array 或者集合对象，不会展开访问 value
Refs
1.
export default { name:'Ref', setup(){ const name = ref(''); name.value='张三'; setTimeout(()=>{ name.value='李四' },2000); return{ name } } }
2.deeply reactive
3.unref 语法糖
Returns the inner value if the argument is a ref, otherwise return the argument itself. This is a sugar function for
val = isRef(val) ? val.value : val.
4.toref
The created ref is synced with its source property: mutating the source property will update the ref, and vice-versa.
5.computed()
setup(peops,ctx){ const sentence = ref( ',你好'); const superSentence = computed(()=>'小明' + sentence.value) console.log( superSentence.value);//小明,你好 }