vue3.x基础
基础指令
-
简单指令v-text、v-html、v-bind、v-on、v-if、v-show
-
v-text
-
-
v-html
-
-
v-bind
-
-
v-on
-
-
v-if、v-show
-
v-for
-
v-model
- v-model不是双向数据绑定的核心, 核心是响应式对象。详情见Composition API
-
-
Composition API
-
createApp、 ref 、reactive、toRefs、watch
-
ref()可以把原来的数据类型变为响应式对象
-
reactive()也可以把原来的数据类型变为响应式对象
-
ref和reactive的区别: ref()不仅能处理对象而且也能处理js基本数据类型; 但是reactive()仅仅只能处理object普通对象 。详情见源码
-
实现单向数据绑定, 也要变响应式对象
-
let声明变量 let number = ref(2)
-
-
toRefs
-
toRefs 用于将一个 reactive 对象转化为属性全部为 ref 对象的普通对象
-
对于相应对象不能使用解构赋值，我们解决办法就是使用toRefs
-
-
watch、watchEffect
-
watch
-
// 第一个参数: 要监听的响应式对象 // 第二个参数: 回调函数（newVal, oldVal）、第三个参数支持 deep、immediate 和 flush 选项。
-
-
-
watchEffect
-
watchEffect会自动收集依赖, 只要指定一个回调函数。在组件初始化时， 会先执行一次来收集依赖， 然后当收集到的依赖中数据发生变化时， 就会再次执行回调函数
-
-
watchEffect与watch区别
-
从源码上来分析，第一区别主要是watchEffect和watch都调用工具函数doWatch函数，但是只是watchEffect在调用doWatch函数的时候，传入的doWtch函数要求的cb为null,使得doWatch在处理source参数时候只是做了简单的响应。
-
直观上区别
-
watchEffect 不需要手动传入依赖
-
watchEffect 无法获取到变化前的值， 只能获取变化后的值
-
watchEffect 会先执行一次用来自动收集依赖
-
-
-
-
computed
-
computed 计算属性 : 比watch更适合计算一个属性, 并且绑定
-
computed 和watch区别
-
watch重点为了监听做事情. 看重的不是返回结果, 而是属性的变化.
-
computed重点为了得到一个属性值,看重的是它的返回结果.
-
-
-
-
-
