1.vue响应式原理 和proxy的对比
参考: 1. vue2 里的响应式其实有点像是一个半完全体,对于对象上新增的属性无能为力,对于数组则需要拦截他的原型方法来实现响应式. 2. 这个时候Vue提供了一个api :this.$set
来实现新增的属性也拥有响应式的效果.
问题:但是很多时候需要小心翼翼的去判断到底什么情况下需要用 $set,什么时候可以直接触发响应式。
在 Vue3 中,这些都将成为过去。proxy 到底会给 Vue3 带来怎么样的便利。
例子1.
let vm = new Vue({
data() {
return {
a: 1
}}})
// ❌ oops,没反应!
vm.b = 2
let vm = new Vue({
data() {
return {
a: 1
}
},
watch: {
b() {
console.log('change !!')
}}})
// ❌ oops,没反应!
vm.b = 2
1.3 vue2 响应式原理
例1.利用input实现数据双向绑定
理解:
发布者
订阅者
观察者
<!-- 发布者 -->
<input type="text">
<!-- 订阅者 -->
<div class="demo"></div>
<!-- 观察者 Object.defineProperty(目标对象,目标对象中的属性,{
6个属性:set,get,value,枚举,可选值,是否可写}) -->
<script>
/* 观察者 */
// let target = {} //目标对象
// Object.defineProperty(target, 'msg', {
// get () { },
// set (value) {
// console.log(value, 5);
// demo.innerHTML = value
// ipt.value = value
// }
// })
// let ipt = document.querySelector('input')
// let demo = document.querySelector('.demo')