Mari kita bincangkan tentang cara melaksanakan pengikatan data dua hala dalam Vue

Bagaimana untuk melaksanakan pengikatan data dua hala dalam

Vue? Artikel berikut akan memperkenalkan kepada anda kaedah pelaksanaan pengikatan dua hala data Vue.js saya harap ia akan membantu anda!

Apabila kami menggunakan vue, apabila data berubah, antara muka juga akan dikemas kini, tetapi ini bukan perkara yang pasti bagaimana vue memantau apabila kami mengubah suai data ? Data berubah dan bagaimanakah Vue menyegarkan antara muka apabila data berubah?

Apabila kami mengubah suai data, vue memantau perubahan data melalui kaedah Object.defineProperty dalam es5 Apabila data berubah, antara muka pelanggan statistik dimuat semula melalui 发布订阅模式 antara muka pelanggan statistik Ini ialah Rekaan corak. [Belajar perkongsian video: tutorial video vue, video bahagian hadapan web]

Seperti yang ditunjukkan di bawah, buat contoh Vue bermula daripada Vue baharu, dan el serta data akan dihantar masuk. data Objek pemerhati akan dihantar masuk, dan Object.definproperty digunakan untuk menukar data dalam data kepada getter/setter untuk rampasan data Setiap atribut dalam data akan mencipta tika Dep untuk menyimpan tika pemerhati

dan el Kemudian masukkan dalam compile dan parse arahan dalam compile Apabila ia dihuraikan ke dalam el dan data dalam data digunakan, getter kami akan dicetuskan, dengan itu menambah pemerhati kami kepada kebergantungan. Apabila data berubah, penetap kami akan dicetuskan untuk mengeluarkan pemberitahuan pergantungan dan memberitahu pemerhati Selepas menerima pemberitahuan, pemerhati akan menghantar pemberitahuan kepada paparan dan membiarkan paparan dikemas kini

Rampasan Data

Bahagian html mencipta teg div dengan apl id, yang mengandungi teg span dan input Teg span menggunakan ungkapan interpolasi dan teg input menggunakan model v

<div class="container" id="app">
    <span>内容:{{content}}</span>
    <input type="text" v-model="content">
</div>

diperkenalkan di bahagian js Cipta fail vue.js, kod untuk melaksanakan pengikatan data dua hala ditulis di dalamnya, kemudian buat instance Vue vm, lekapkan data pada tag div

const vm=new Vue({
    el:'#app',
        data:{
        content:'请输入开机密码'
    }
})

Instance Vue baharu adalah jelas Anda perlu menggunakan pembina Kelas yang ditakrifkan dalam kod sumber vue ditakrifkan menggunakan

fungsi Di sini saya menggunakan kelas ES6 untuk mencipta contoh Vue ini

Kemudian tetapkan

, parameter formal ditetapkan kepada obj_instance, kerana objek diluluskan semasa mencipta tika Vue baharu, dan tetapkan data dalam objek yang diluluskan kepada atribut $data dalam contoh constructor

dalam javascript Jika sifat objek telah berubah, anda perlu memberitahu kami supaya kami boleh mengemas kini sifat yang diubah kepada nod dom Oleh itu, apabila memulakan contoh, tentukan fungsi mendengar sebagai panggilan , dan semasa membuat panggilan, hantarkan data yang perlu dipantau

class Vue{//创建Vue实例
  constructor(obj_instance){
    this.$data=obj_instance.data
    Observer(this.$data)
  }
}
function Observer(data_instance){//监听函数
  
}

Cetak instance ini vm

Instance telah dibuat tetapi anda masih perlu memantau setiap atribut dalam $data Untuk melaksanakan pemantauan data, gunakan Apabila ia berkaitan dengan

, Object.defineProperty boleh mengubah suai sifat sedia ada objek. Format sintaks ialah Object.definePropertyObject.defineProperty(obj, prop,. deskriptor)

obj: sifat yang akan ditakrifkan Objek
prop: nama harta yang akan ditakrifkan atau diubah suai
deskriptor: sifat deskriptor untuk ditakrifkan atau diubah suai

memantau setiap sifat dalam objek, Kami menggunakan Object.keys dan foreach untuk melintasi setiap sifat dalam objek dan menggunakan Object.defineProperty untuk setiap harta untuk memantau data

function Observer(data_instance){
  Object.keys(data_instance).forEach(key=>{
    Object.defineProperty(data_instance,key,{
      enumerable:true,//设置为true表示属性可以枚举
      configurable:true,//设置为true表示属性描述符可以被改变
      get(){},//访问该属性的时候触发，get和set函数就是数据监听的核心
      set(){},//修改该属性的时候触发
    })
  })
}

Sebelum

, anda perlu menyimpan nilai yang sepadan dengan harta dan kemudian Kembalikannya dalam fungsi get, jika tidak, nilai atribut akan hilang selepas fungsi get dicapai, dan nilai dikembalikan kepada atribut akan menjadi tidak ditentukanObject.defineProperty

let value=data_instance[key]
Object.defineProperty(data_instance,key,{
  enumerable:true,
  configurable:true,
  get(){
    console.log(key,value);
    return value
  },
  set(){}
})

Mengklik nama atribut dalam $data akan mencetuskan fungsi get

Kemudian tetapkan fungsi set dan tetapkan parameter formal untuk set. Parameter formal ini mewakili nilai atribut yang baru diluluskan, dan kemudian tetapkan nilai atribut baharu ini kepada nilai pembolehubah, tidak Apa yang perlu dikembalikan. get juga akan mengakses nilai pembolehubah nilai terkini

set(newValue){
    console.log(key,value,newValue);
    value = newValue
}

Tetapi pada masa ini Hanya get dan set ditetapkan untuk atribut lapisan pertama $data Jika terdapat lapisan yang lebih dalam seperti itu kerana

obj:{
    a:'a',
    b:'b'
}

yang tidak mempunyai set get dan set, kita perlu pergi lapisan demi lapisan Rampasan data dilakukan dalam atribut, jadi gunakan

rekursi untuk memantau diri anda semula dan membuat. pertimbangan bersyarat sebelum merentasi. Jika tiada sub-atribut atau tiada objek dikesan, rekursi akan ditamatkan

function Observer(data_instance){
  //递归出口
  if(!data_instance || typeof data_instance != 'object') return
  Object.keys(data_instance).forEach(key=>{
    let value=data_instance[key]
    Observer(value)//递归-子属性的劫持
    Object.defineProperty(data_instance,key,{
      enumerable:true,
      configurable:true,
      get(){
        console.log(key,value);
        return value
      },
      set(newValue){
        console.log(key,value,newValue);
        value = newValue
      }
    })
  })
}

dan Satu perincian, jika kita menulis semula atribut kandungan $data daripada rentetan kepada rentetan objek, objek baharu ini tidak mempunyai get dan set

因为我们在修改的时候根本没有设置get和set，因此在set里要调用监听函数

set(newValue){
    console.log(key,value,newValue);
    value = newValue
    Observer(newValue)
}

模板解析

劫持数据后就要把Vue实例里的数据应用带页面上，得要加一个临时内存区域，将所有数据都更新后再渲染页面以此减少dom操作

创建一个解析函数，设置2个参数，一个是Vue实例里挂载的元素，另一个是Vue实例，在函数里获取获取元素保存在实例了的$el里，获取元素后放入临时内存里，需要用到[createDocumentFragment]创建一个新的空白的文档片段

然后把$el的子节点一个一个加到fragment变量里，页面已经没有内容了，内容都被临时存在fragment里了

class Vue{
  constructor(obj_instance){
    this.$data=obj_instance.data
    Observer(this.$data)
    Compile(obj_instance.el,this)
  }
}
function Compile(ele,vm){
  vm.$el=document.querySelector(ele)
  const fragment=document.createDocumentFragment()
  let child;
  while (child=vm.$el.firstChild){
    fragment.append(child)
  }
  console.log(fragment);
  console.log(fragment.childNodes);
}

现在直接把需要修改的内容应用到文档碎片里面，应用后重新渲染，只需修改了fragment的childNodes子节点的文本节点，文本节点的类型是3，可以创建一个函数并调用来修改fragment里的内容

节点里面可能还会有节点，因此判定节点类型是否为3，不是就递归调用这个解析函数

节点类型为3就进行修改操作，但也不行把整个节点的文本都修改，只需修改插值表达式的内容，因此要使用正则表达式匹配，将匹配的结果保存到变量里，匹配的结果是一个数组，而索引为1的元素才是我们需要提取出来的元素，这个元素就是去除了{{}}和空格得到的字符串，然后就可以直接用Vue实例来访问对应属性的值，修改完后return出去结束递归

function Compile(ele,vm){
  vm.$el=document.querySelector(ele) //获取元素保存在实例了的$el里
  const fragment=document.createDocumentFragment() //创建文档碎片
  let child;
  while (child=vm.$el.firstChild){//循环将子节点添加到文档碎片里
    fragment.append(child)
  }
  
  fragment_compile(fragment)
  function fragment_compile(node){ //修改文本节点内容
    const pattern = /\{\{\s*(\S*)\s*\}\}/ //检索字符串中正则表达式的匹配，用于匹配插值表达式
    if(node.nodeType===3){
      const result = pattern.exec(node.nodeValue)
      if(result){
        console.log('result[1]')
        const value=result[1].split('.').reduce(//split将对象里的属性分布在数组里，链式地进行排列；reduce进行累加，层层递进获取$data的值
          (total,current)=>total[current],vm.$data
        )
        node.nodeValue=node.nodeValue.replace(pattern,value) //replace函数将插值表达式替换成$data里的属性的值
      }
      return 
    }
    node.childNodes.forEach(child=>fragment_compile(child))
  }
  vm.$el.appendChild(fragment) //将文档碎片应用到对应的dom元素里面
}

页面的内容又出来了，插值表达式替换成了vm实例里的数据

订阅发布者模式

虽然进行了数据劫持，和将数据应用到页面上，但是数据发生变动还不能及时更新，还需要实现订阅发布者模式

首先创建一个类用来收集和通知订阅者，生成实例的时候需要有一个数组存放订阅者的信息，一个将订阅者添加到这个数组里的方法和一个通知订阅者的方法，调用这个方法就回去遍历订阅者的数组，让订阅者调用自身的update方法进行更新

class Dependency{
  constructor(){
    this.subscribers=[] //存放订阅者的信息
  }
  addSub(sub){
    this.subscribers.push(sub) //将订阅者添加到这个数组里
  }
  notify(){
    this.subscribers.forEach(sub=>sub.update()) //遍历订阅者的数组，调用自身的update函数进行更新
  }
}

设置订阅者类，需要用到Vue实例上的属性，需要Vue实例和Vue实例对应的属性和一个回调函数作为参数，将参数都赋值给实例

然后就可以创建订阅者的update函数，在函数里调用传进来的回调函数

class Watcher{
  constructor(vm,key,callback){//将参数都赋值给Watcher实例
    this.vm=vm
    this.key=key
    this.callback=callback
  }
  update(){
    this.callback() 
  }
}

替换文档碎片内容的时候需要告诉订阅者如何更新，所以订阅者实例在模板解析把节点值替换内容的时候创建，传入vm实例，exec匹配成功后的索引值1和回调函数，将替换文本的执行语句复制到回调函数里，通知订阅者更新的时候就调用这个回调函数

回调函数里的nodeValue要提前保存，不然替换的内容就不是插值表达式而是替换过的内容

然后就要想办法将订阅者存储到Dependency实例的数组里，我们可以在构造Watcher实例的时候保存实例到订阅者数组里

Dependency.temp=this //设置一个临时属性temp

将新的订阅者添加到订阅者数组里且还要将所有的订阅者都进行同样的操作，那么就可以在触发get的时候将订阅者添加到订阅者数组里，为了正确触发对应的属性get，需要用reduce方法对key进行同样的操作

可以看到控制台打印出了Wathcer实例，每个实例都不同，都对应不同的属性值

Dependency类还没创建实例，里面的订阅者数组是不存在的，所以要先创建实例再将订阅者添加到订阅者数组里

修改数据的时候通知订阅者来进行更新，在set里调用dependency的通知方法，通知方法就会去遍数组，订阅者执行自己的update方法进行数据更新

但是update调用回调函数缺少设定形参，依旧使用split和reduce方法获取属性值

update(){
    const value =this.key.split('.').reduce(
        (total,current)=>total[current],this.vm.$data
    )
    this.callback(value)
}

在控制台修改属性值都修改成功了，页面也自动更新了

完成了文本的绑定就可以绑定输入框了，在vue里通过v-model进行绑定，因此要判断哪个节点有v-model，元素节点的类型是1，可以使用nodeName来匹配input元素，直接在判断文本节点下面进行新的判断

if(node.nodeType===1&&node.nodeName==='INPUT'){
    const attr=Array.from(node.attributes)
    console.log(attr);
}

节点名字nodeName为v-model，nodeValue为name，就是数据里的属性名

因此对这个数组进行遍历，匹配到了v-model根据nodeValue找到对应的属性值，把属性值赋值到节点上，同时为了在数据更新后订阅者知道更新自己，也要在INPUT节点里新增Watcher实例

attr.forEach(i=>{
    if(i.nodeName==='v-model'){
        const value=i.nodeValue.split('.').reduce(
            (total,current)=>total[current],vm.$data
        )
        node.value=value
        new Watcher(vm,i.nodeValue,newValue=>{
            node.value=newValue
        })
    }
})

修改属性值，页面也作出修改

最后剩下用视图改变数据，在v-model的节点上使用addEventListener增加input监听事件就行了

node.addEventListener('input',e=>{
    const arr1=i.nodeValue.split('.')
    const arr2=arr1.slice(0,arr1.length - 1)
    const final=arr2.reduce(
        (total,current)=>total[current],vm.$data
    )
    final[arr1[arr1.length - 1]]=e.target.value
})

（学习视频分享：web前端开发、编程基础视频）

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara melaksanakan pengikatan data dua hala dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!