Use of defineProperty attribute of vue

This time I will bring you the use of the defineProperty attribute of vue. What are the precautions for the use of the defineProperty attribute of vue. The following is a practical case, let's take a look.

1. Principle

I believe everyone is familiar with the principle of vue's two-way data binding; mainly through the defineProperty attribute of the ES5 Object object; rewriting data Set and get functions are implemented

, so we will not use ES6 for actual code development; if the function uses the parent this during the process, we should still use the display cache intermediate variables and closures for processing; the reason is The arrow function does not have an independent execution context this; so when the this object appears inside the arrow function, it will directly access the parent; so it can also be seen that the arrow function cannot completely replace the usage scenario of the function; for example, when we need independent this or argument

1.2 What is defineProperty

Syntax:

Object.defineProperty(obj, prop, descriptor)

Parameters:

obj: necessary target object

prop: necessary attribute name that needs to be defined or modified

descriptor: necessary attribute owned by all target attributes

Return value :

Returns the first function passed in; that is, the first parameter obj

This method allows precise addition or modification of the properties of the object; ordinary properties added through assignment will be created in Displayed during attribute enumeration (fon...in; object.key); these added values ​​can be changed or deleted; you can also set some characteristics for this attribute; such as whether it is read-only and not writable; currently there are two forms: Data description (set; get; value; writable; enumerable; confingurable) and accessor description (set; get)

Data description

When modifying or defining the object When a certain attribute; add some characteristics to this attribute

var obj = {
 name:'xiangha'
}
// 对象已有的属性添加特性描述
Object.defineProperty(obj,'name',{
 configurable:true | false, // 如果是false则不可以删除
 enumerable:true | false, // 如果为false则在枚举时候会忽略
 value:'任意类型的值,默认undefined'
 writable:true | false // 如果为false则不可采用数据运算符进行赋值
});
但是存在一个交叉；如果wrirable为true；而configurable为false的时候；所以需要枚举处理enumerable为false
--- 我是一个writable栗子 ---
var obj = {};
Object.defineProperty(obj,'val',{
 value:'xiangha',
 writable:false, // false
 enumerable:true,
 configurable:true
});
obj.val = '书记'; // 这个时候是更改不了a的
--- 我是一个configurable栗子 ---
var obj = {};
Object.defineProperty(obj,'val',{
 value:'xiangha',
 writable:true, // true
 enumerable:true,
 configurable:false // false
});
obj.val = '书记'; // 这个时候是val发生了改变
delete obj.val 会返回false；并且val没有删除
--- 我是一个enumerable栗子 --- 
var obj = {};
Object.defineProperty(obj,'val',{
 value:'xiangha',
 writable:true,
 enumerable:false, // false
 configurable:true
});
for(var i in obj){
 console.log(obj[i]) // 没有具体值
}
综上：对于我们有影响主要是configurable控制是否可以删除；writable控制是否可以修改赋值；enumerable是否可以枚举

So once you use Object.defineProperty() to add attributes to the object; then if you do not set the characteristics of the attribute; the default value is false

var obj = {}; 
Object.defineProperty(obj,'name',{}); // 定义了心属性name后；这个属性的特性的值都为false；这就导致name这个是不能重写不能枚举不能再次设置特性的
obj.name = '书记'; 
console.log(obj.name); // undefined
for(var i in obj){
 console.log(obj[i])
}

Summary features:

• value: Set the value of the attribute

• ##writable ['raɪtəbl]: Whether the value can be overridden

• enumerable [ɪ'nju:mərəbəl]: Whether the target attribute can be enumerated

• configurable [kən'fɪgərəbl] ]: Whether the target attribute can be deleted and whether the attribute can be modified again

Accessor description

var obj = {};
Object.defineProperty(obj,'name',{
 get:function(){} | undefined,
 set:function(){} | undefined,
 configuracble:true | false,
 enumerable:true | false
})
注意：当前使用了setter和getter方法；不允许使用writable和value两个属性

gettet&& setter

When setting to obtain a certain attribute of the object; you can provide getter and setter methods

var obj = {};
var value = 'xiangha';
Object.defineProperty(obj,'name',{
 get:function(){
  // 获取值触发
  return value
 }，
 set：function(val){
  // 设置值的时候触发；设置的新值通过参数val拿到
  value = val；
 }
});
console.log(obj.name); // xiangha
obj.name = '书记';
console,.log(obj.name); // 书记

get and set do not have to appear in pairs; just write either one; if you do not set set and set get method; it is undefined

Haha; the foreplay is finally completed

Supplement: If you use vue to develop the project; when you try to print the data object, you will find every attribute in the data Both have get and set attribute methods; here is a description of the difference in two-way data binding between vue and angular

angular uses dirty data detection; when the Model changes, it will detect whether all views are bound to relevant data ; Update the view again

vue uses the publish-subscribe mode; point-to-point binding data

2. Implementation The

<p>
 </p>

     增加  

 

  page is very simple; it contains:

1. An input, using the v-model instruction

2. A button, using the v-click instruction

3. An h3, use the v-bind command.

We will eventually implement two-way data binding in a similar way to vue

var app = new xhVue({
  el:'#app',
  data: {
  number: 0
  },
  methods: {
  increment: function() {
   this.number ++;
  },
  }
 })

2.1 Definition

First we need Define a xhVue constructor

function xhVue(options){
 
}

2.2 Add

In order to initialize this constructor; add an _init attribute to it

function xhVue(options){
 this._init(options);
}
xhVue.prototype._init = function(options){
 this.$options = options; // options为使用时传入的结构体；包括el，data，methods等
 this.$el = document.querySelector(options.el); // el就是#app，this.$el是id为app的Element元素
 this.$data = options.data; // this.$data = {number:0}
 this.$methods = options.methods; // increment
}

2.3 Transformation and upgrade

Transform the _init function; and implement the _xhob function; process data; rewrite the set and get functions

xhVue.prototype._xhob = function(obj){ // obj = {number:0}
 var value;
 for(key in obj){
  if(obj.hasOwnProperty(ket)){
   value = obj[key];
   if(typeof value === 'object'){
    this._xhob(value);
   }
   Object.defineProperty(this.$data,key,{
    enumerable:true,
    configurable:true,
    get:function(){
     return value;
    },
    set:function(newVal){
     if(value !== newVal){
      value = newVal;
     }
    }
   })
  }
 }
}
xhVue.prototype._init = function(options){
 this.$options = options;
 this.$el = document.querySelector(options.el);
 this.$data = options.data;
 this.$method = options.methods;
 this._xhob(this.$data);
}

2.4 xhWatcher

指令类watcher；用来绑定更新函数；实现对DOM更新

function xhWatcher(name,el,vm,exp,attr){
 this.name = name; // 指令名称；对于文本节点；例如text
 this.el = el; // 指令对应DOM元素
 this.vm = vm; // 指令所属vue实例
 this.exp = exp; // 指令对应的值；例如number
 this.attr = attr; // 绑定的属性值；例如innerHTML
 this.update();
}
xhWatcher.prototype.update = function(){
 this.el[this.attr] = this.vm.$data[this.exp];
 // 例如h3的innerHTML = this.data.number;当numner改变则会触发本update方法；保证对应的DOM实时更新
}

2.5 完善_init和_xhob

继续完善_init和_xhob函数

// 给init的时候增加一个对象来存储model和view的映射关系；也就是我们前面定义的xhWatcher的实例；当model发生变化时；我们会触发其中的指令另其更新；保证了view也同时更新
xhVue.prototype._init = function(options){
 this.$options = options;
 this.$el = document.querySelector(options.el);
 this.$data = options.data;
 this.$method = options.methods;
 
 this._binding = {}; // _binding
 this._xhob(this.$data);
}
// 通过init出来的_binding
xhVue.prototype._xhob = function(obj){ // obj = {number:0}
 var value;
 for(key in obj){
  if(obj.hasOwnProperty(ket)){
   this._binding[key] = {
    // _binding = {number:_directives:[]}
    _directives = []
   }
   value = obj[key];
   if(typeof value === 'object'){
    this._xhob(value);
   }
   var binding = this._binding[key];
   Object.defineProperty(this.$data,key,{
    enumerable:true,
    configurable:true,
    get:function(){
     return value;
    },
    set:function(newVal){
     if(value !== newVal){
      value = newVal;
      // 当number改变时；触发_binding[number]._directives中已绑定的xhWatcher更新
      binding._directives.forEach(function(item){
       item.update(); 
      });
     }
    }
   })
  }
 }
}

2.6 解析指令

怎么才能将view与model绑定；我们定义一个_xhcomplie函数来解析我们的指令（v-bind；v-model；v-clickde）并这这个过程中对view和model进行绑定

xhVue.prototype._xhcompile = function (root) {
 // root是id为app的element的元素；也就是根元素
 var _this = this;
 var nodes = root.children;
 for (var i = 0,len = nodes.length; i <p style="text-align: left;">并且将解析函数也加到_init函数中</p><pre class="brush:php;toolbar:false">xhVue.prototype._init = function(options){
 this.$options = options;
 this.$el = document.querySelector(options.el);
 this.$data = options.data;
 this.$method = options.methods;
 
 this._binding = {}; // _binding
 this._xhob(this.$data);
 this._xhcompile(this.$el);
}

最后

nbsp;html>


 <meta>
 <title>Document</title>


 <p>
  </p>

       增加   

  

  <script> function xhVue(options) { this._init(options); } xhVue.prototype._init = function (options) { this.$options = options; this.$el = document.querySelector(options.el); this.$data = options.data; this.$method = options.methods; this._binding = {}; // _binding this._xhob(this.$data); this._xhcompile(this.$el); } xhVue.prototype._xhob = function (obj) { var value; for (key in obj) { if (obj.hasOwnProperty(key)) { this._binding[key] = { _directives: [] } value = obj[key]; if (typeof value === &#39;object&#39;) { this._xhob(value); } var binding = this._binding[key]; Object.defineProperty(this.$data, key, { enumerable: true, configurable: true, get: function () { console.log(`get${value}`) return value; }, set: function (newVal) { if (value !== newVal) { value = newVal; console.log(`set${newVal}`) // 当number改变时；触发_binding[number]._directives中已绑定的xhWatcher更新 binding._directives.forEach(function (item) { item.update(); }); } } }) } } } xhVue.prototype._xhcompile = function (root) { // root是id为app的element的元素；也就是根元素 var _this = this; var nodes = root.children; for (var i = 0, len = nodes.length; i < len; i++) { var node = nodes[i]; if (node.children.length) { // 所有元素进行处理 this._xhcompile(node) }; // 如果有v-click属性；我们监听他的click事件；触发increment事件，即number++ if (node.hasAttribute(&#39;v-click&#39;)) { node.onclick = (function () { var attrVal = node.getAttribute(&#39;v-click&#39;); console.log(attrVal); // bind让data的作用域与method函数的作用域保持一致 return _this.$method[attrVal].bind(_this.$data); })(); }; // 如果有v-model属性；并且元素是input或者textrea；我们监听他的input事件 if (node.hasAttribute(&#39;v-model&#39;) && (node.tagName = &#39;INPUT&#39; || node.tagName == &#39;TEXTAREA&#39;)) { node.addEventListener(&#39;input&#39;, (function (key) { var attrVal = node.getAttribute(&#39;v-model&#39;); _this._binding[attrVal]._directives.push(new xhWatcher( &#39;input&#39;, node, _this, attrVal, &#39;value&#39; )); return function () { // 让number的值和node的value保持一致；就实现了双向数据绑定 _this.$data[attrVal] = nodes[key].value } })(i)); }; // 如果有v-bind属性；我们要让node的值实时更新为data中number的值 if (node.hasAttribute(&#39;v-bind&#39;)) { var attrVal = node.getAttribute(&#39;v-bind&#39;); _this._binding[attrVal]._directives.push(new xhWatcher( &#39;text&#39;, node, _this, attrVal, &#39;innerHTML&#39; )) } } } function xhWatcher(name, el, vm, exp, attr) { this.name = name; // 指令名称；对于文本节点；例如text this.el = el; // 指令对应DOM元素 this.vm = vm; // 指令所属vue实例 this.exp = exp; // 指令对应的值；例如number this.attr = attr; // 绑定的属性值；例如innerHTML this.update(); } xhWatcher.prototype.update = function () { this.el[this.attr] = this.vm.$data[this.exp]; // 例如h3的innerHTML = this.data.number;当numner改变则会触发本update方法；保证对应的DOM实时更新 } var app = new xhVue({ el: &#39;#app&#39;, data: { number: 0 }, methods: { increment: function () { this.number++; } } }); </script>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样使用jQuery滚动条美化插件nicescroll

Angular中怎样调用第三方库

The above is the detailed content of Use of defineProperty attribute of vue. For more information, please follow other related articles on the PHP Chinese website!