侧边栏壁纸
博主头像
@小佑前端_

学而不厌 不耻下问

  • 累计撰写 61 篇文章
  • 累计创建 82 个标签
  • 累计收到 11 条评论

目 录CONTENT

文章目录

V-model原理/Vue哪些不是响应式的地方

@小佑前端_
2021-04-15 / 0 评论 / 0 点赞 / 507 阅读 / 525 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-02,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
  • 刚开始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
	})
  • 刚开始渲染的时候把数据的信息拿到赋值给视图上
  • 监听视图的更新,视图内容更新,重新修改为最新的数据
  • 数据更改完需要重新渲染视图
0

评论区