时间:2021-05-26
本文介绍了Vue的MVVM实现方法,分享给大家,具体如下:
1. Object.defineProperty() 定义属性
用意:给一个对象定义属性,那个属性原来是不存在的。这是一个初衷,属性是不存在的,需要额外添加。
①、使用说明
Object.defineProperty(obj,props)
第一个参数是将被添加或者修改的属性的对象
第二个参数是一个对象,表示将要添加的一个或多个键值对一直要添加属性的具体配置
{
'属性名':{value:'...',writable:true},
'属性名':{value:'...',writable:true}
}
②、属性的getter和setter
③、使用场景
// 简单的给元素添加属性 var obj = {name:'hcc'} Object.defineProperties(obj,{ 'name':{value:'haaaaa',writable:true}, 'age':{value:24,writable:false} })细节
今天楼主上午在思考,一般使用Object.defineProperty()为什么需要使用局部变量呢?
所有楼主就下了下面的代码
var obj = {}Object.defineProperty(obj,'a',{ get() { return 'gg'; }, set(value) { obj.a = value; }})解析: 为什么会出现堆溢栈呢 ? 我们在调用 obj.a = 'ff' 的时候,触发了set()方法,从而执行了obj.a = value,又给obj.a进行了赋值,调用set()方法,进入了死循环。
总结: 所以我们在使用Object.defineProperty()的时候,都是通过一个私有变量或者一个局部变量来实现对象的属性的赋值和设置。
// 局部变量,以一个变量为躯壳,设置返回值。const obj = {}{ let bValue; Object.defineProperty(obj,'a',{ get(){ return bValue }, set(value) { bValue = value; }})}// 私有变量const obj = { _data: { a: null }}Object.defineProperty(obj,'a', { get() { return obj._data.a }, set(value) { obj._data.a = value }})总结: Vue中进行双向绑定就是通过私有变量data实现的。是不是和Vue的结构很相似。
实现Vue的双向绑定
html部分
<div class="forms"> <span>姓名</span> <input type='text' name="name"> <span>年龄</span> <input type='text' name="age"></div>js部分
// 改变input的值得同时obj的值改变const obj = { _data: { name: null, age: null }}const nameInput = document.querySelector('input[name]')nameInput.addEventListener('input', (e) => { obj._data.name = e.target.value;})Object.definePeoperty(obj,'a',{ get() { return obj._data.name }, set(value) { nameInput.value = value; obj._data.name = value; }})// 简化function bind(obj,dom) { let name = dom.getAttribute('name'); Object.defineProperty(obj,name,{ get() { return obj._data[name] }, set(value) { dom.value = value; obj._data[name] = value; } }) dom.addEventListener('input', (e) => { obj._data[name] = e.target.value; })}bind(obj,document.querySelector('input[name=name]'))bind(obj,document.querySelector('input[name=age]'))缺点: 必须要事先的绑定dom。是不是和Vue里面的很想,必须事先申明data中的数据,如果需要额外的添加数据的时候,必须通过Vue.set()来申明。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
一、响应式的底层实现1、Vue与MVVMVue是一个MVVM框架,其各层的对应关系如下View层:在Vue中是绑定dom对象的HTMLViewModel层:在V
Vue介绍Vue是当前很火的一款MVVM的轻量级框架,它是以数据驱动和组件化的思想构建的。因为它提供了简洁易于理解的api,使得我们很容易上手。Vue与MVVM
目前,mvvm的框架主要有四种,分别为vue.js、react.js、avalon、angular.js。 MVVM本质上是MVC的改进版。MVVM就是将其中
vue和angular非常像都是MVVM。道理都是想通的,就是语法的差异我觉得vue和angular区别:1.vue更轻,更便捷,适用于移动开发2.vue更简单
现成MVVM菜单教程Vue测试实例-菜鸟教程(runoob.com){{message}}letvm=newVue({el:'#app',data:{messa