• 刚开始Vue初始化的时候会把data中的数据加一个set()get()属性,来保持响应式。
  1. data中不是所有的值都是响应式,解决办法:
    • 在Vue初始化的时候,可以给当前的属性赋值一个默认值
    • 可以直接把要展示的对象地址替换掉(把堆内存替换)
    • 利用Vue实例的方法进行设置 vm.$set(obj.key.value)

V-model原理

	let data ={
	 msg:"小铭" // 页面展示的数据
	} 

 	let template = {
		msg:data.msg
	}
 	Object.defineProperty(data,'msg',{
	set(value){
		template.msg = value;
		render();
	}
      });

	// 渲染视图
	function render(){
		inpBox.value = template.msg;
		spantext.innerHtml = template.msg
	}
	render()
	// 视图数据更改监听
	inpBox.addEventListener('input',function(){
	data.msg = this.value
	})
  • 刚开始渲染的时候把数据的信息拿到赋值给视图上
  • 监听视图的更新,视图内容更新,重新修改为最新的数据
  • 数据更改完需要重新渲染视图

Q.E.D.


学而不厌 不耻下问