vue渐进式框架

如果采用原生js来对dom元素进行操作,需要获取元素再获取相关内容然后添加一系列事件,这样操作繁琐
MV*就是将js分为三个部分,model(数据) (逻辑控制) view(视图)
model只负责数据,view负责更改页面样式,逻辑层用来联系model和view,这样当对应的版块发生改变时,只需要修改相应版块就可以了

UI=VM(state)

vue双向绑定原理是由数据劫持结合发布者-订阅者模式实现的
vue的数据劫持是通过Object.defineProperty()来对对象的setter和getter属性进行操作,在数据变动时,进行你想要的操作

    Object.defineProperty(obj , prop , descriptor)

• 参数
  obj 要在其上定义属性的对象
  prop 要定义或修改的属性的名称
  descriptor 将被定义或修改的属性描述
• 返回值
  被传递给函数的对象

也就是说它可以控制一个对象属性的一些特有操作,比如读写或是否可枚举等,这里主要看set和get

    var obj = {};
    obj.name = 'yz';
    console.log(obj.name);

    // 通过Object.defineProperty()的set和get方法,使打印出来的name名前后都加上长长的*********
    var obj = {};
    var temp = '';
    Object.defineProperty( obj , 'name' , {
        set : function(value){
            temp = value;
            console.log('名字是' + value)
        },
        get : function(){
            console.log('get监听');
            return `***** ${temp} *****`
        }
    })
    obj.name = 'dddd';
    console.log(obj.name);