脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue2响应式双向绑定,在对象或数组新增属性页面无响应

vue2之响应式双向绑定,在对象或数组新增属性页面无响应的情况

 更新时间：2023年04月20日 15:50:11   作者：潮汐未见潮落  
这篇文章主要介绍了vue2之响应式双向绑定,在对象或数组新增属性页面无响应的情况及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue2响应式双向绑定,在对象或数组新增属性页面无响应

问题描述

vue2 中可以将数据与视图进行绑定，修改 data 对象的属性值将引起对应视图的改变。

Vue2的数据视图绑定是通过JS特性这一语法实现，其使用中存在数据属性丢失的这 一 bug，主要针对 对象或数组 属性丢失。

使用 antv 的 a-select （下拉框）组件，使用 v-mode 绑定对象 的值，但是 对象之前是没有赋值的，是一个 空对象 ，这就导致了 页面视图不刷新 ，但是 属性值有变化 ，这可以说是 vue2 的一个缺陷。

// 空对象

queryParam: {

      },

解决方法

方法一 （设置初始值）

给 绑定的对象 赋初始值 null 或者 ' ' 

  queryParam: {
        approveStatus : null ,    
      },

 如果是普通 输入框 input ，这样的方法没什么问题，但是 我的页面使用 a-select 下拉框，默认有提示消息（ placeholder），如果 赋初始值 为空 ，下拉框会填充空白内容 ，覆盖之前的提示消息 ，这样的页面 会比较不美观且不友好

  <a-select  v-model="queryParam.approveStatus" placeholder="审核状态" :allowClear="true">
        <a-select-option v-for="status of videoApproveStatus" :key="status.id">
                 {{  status.text }}
        </a-select-option>
 </a-select>
                    
  <a-select  v-model="queryParam.videotypeid" placeholder="视频类型" :allowClear="true">
         <a-select-option v-for="d in videotype" :key="d.myid">
                 {{ d.name }}
          </a-select-option>
   </a-select>

       

虽然这种方法可以解决绑定对象属性丢失问题，但是如果给 每个属性设置 初始值 为 null，那么所有的下拉框都是空白 ， 可以看到 下拉框 赋初始值 为 null ，页面的效果非常不友好 ，没有提示信息 ，所有这种方法不推荐

方法二 （创建一个新的对象,替换原对象）

这种方法可以用于需要添加多个新属性,再把原对象与新属性合并到新对象中

Object.assign(目标对象,原对象, 新属性)

this.queryParam = Object.assign({}, this.queryParam, obj)

我这里是 利用 a-select 下拉框 自带的 下拉框 改变方法 ，@change ，该方法有两个参数 value 和 option ，value 代表你改变的值 ，option （我也不太明白 ，反正里面东西很多），然后 我利用 这个 @change 方法 和  Object.assign(目标对象,原对象, 新属性)， 解决了状态丢失问题 ，大家可以 参考下面的代码 ，根据自己的实际情况进行调整 （每个人的情况都不一样）

 <a-select @change="handleChange"  v-model="queryParam.approveStatus" placeholder="审核状态" :allowClear="true">
       <a-select-option v-for="status of videoApproveStatus" :key="status.id">
               {{  status.text }}
       </a-select-option>
 </a-select>
 handleChange(value,option) { 
      if(option) {
        //  解决双向绑定状态丢失
          this.queryParam = Object.assign({}, this.queryParam, option.context.queryParam)
      } else {
        return 
      } 
    },

vue2实现响应式数据

JS中的对象属性

JS的对象有两种属性进行描述 分别是数据属性和访问器属性。

数据属性有四个值：

  • [[Configurable]] 表示是否可以删除定义，是否可以修改属性，默认为true
  • [[Enumberable]] 是否可以迭代
  • [[Writable]] 是否可以被修改
  • [[Value]] 对象具体的值

而访问器属性也有四个值：

  • [[Configurable]] 表示是否可以删除定义，是否可以修改属性，默认为true
  • [[Enumberable]] 是否可以迭代
  • [[Get]] 获取函数，读取属性值时使用
  • [[Set]] 设置函数，写入属性时调用

那么如何实现数据响应呢？

利用Object.defineProperty()进行数据劫持

实现响应式的前提是可以捕捉到到数据的更改，获取数据同理，这就需要利用JS对象的访问器属性，而更改这些属性 就要用到JS中的一个方法 Object.defineProperty() 上述的属性在更改时，哪怕更改一个属性，所有属性都会变为默认值。

具体使用方法如下：

let obj = {name:'Ton', age: 19}
_value = obj.name
Object.defineProperty(obj, name, {
    get(){
        return _value
    },
    set(newValue){
       _value = newValue
    }
})

方法的参数分别是 Object.defineProperty(对象名, 属性名, {执行器})

而get 函数在读取该对象属性时调用，返回的值为读取的值； set 函数会在设置新值时调用 传入的newValue为新值。

在Vue中 会用data一个对象包裹所有的值，因此可以用遍历的方法给每个属性加上该方法。

将该逻辑封装到一个函数中：

let data = {
    name: 'Ton',
    age: 19,
    salary: '10k'
}

Object.keys(data).forEach( key => { 
    observe(data, key, data[key])
})
//形成闭包 内部的变量不会消失
function observe(obj, key, value){
    Object.defineProperty(obj, key, {
        get(){
            return value
        },
        set(newValue){
            value = newValue
        }
    })
}

这样data中的所有变量都会被绑定，但如果嵌套对象或数组，内部的对象不会被检测到。（可以用vue提供的 $set和 $delate 处理或 使用内部重写的数组方法）

与标签联动

与标签联动的方法有许多，最简单的是使用id 来绑定，而Vue中是使用指令的方式。

过程主要分两步：

  • 获取dom
  • 将数据放上去
...
<div id="app">
    <div v-test="name" class="box"></div>
    <div v-test="age" class="box"></div>
</div>
...
function compile(){
    let app = document.getElementById('app')
    //获取所有的子节点 值为3的是text节点 1为子标签节点
    app.childNodes.forEach( node => {
        if(node.nodeType === 1){
            //遍历该节点的属性 找出 v-text 
            //node.attributes是个类数组对象, 先转化为数组
            Array.from(node.attributes).forEach( key => {
                //解构对象 nodeName 找到属性
                let { nodeName, nodeValue } = key 
                 //如果存在 则修改值（关键步骤）
                if(nodeName === 'v-test'){
                    node.innerText = data[nodeValue]
                   }
            })
        }
    })
}
compile()
...

此时可以获取节点，并赋值数据，与数据劫持联动，最终结果如下：

let data = { name: 'Ton', age: 19}
//劫持数据
Object.keys(data).forEach(key => {
    observe(data, key, data[key])
})
//形成闭包 内部的变量不会消失
function observe(obj, key, value) {
    Object.defineProperty(obj, key, {
        get() {
            return value 
        },
        set(newValue) {
            value = newValue
            compile()
        }
    })
}
//获取元素 将数据放入
function compile(){
    let app = document.getElementById('app')
    //获取所有的子节点 包括很多节点 3 为text 节点 1为子标签节点
    app.childNodes.forEach( node => {
        if(node.nodeType === 1){
            //遍历该节点的属性 找出 v-text 
            //node.attributes是个类数组对象, 先转化为数组
            let result = Array.from(node.attributes).filter( key => {
                //结构属性的 nodeName 找到属性
                let { nodeName } = key 
                return nodeName === 'v-test'
            })
            if(result){
                node.innerText = data[result[0].nodeValue]
            }
        }
    })

}
compile()

每次修改也会引起DOM元素的修改，实现响应式。

v-model的实现

同v-test（v-on） 的不同，v-model要实现双向绑定，即 input框输入的值也需要传回data。实现的逻辑前面是相同的，都需要获取元素，但需要新增将input输入框的内容，传回。

let data = { name: 'Ton', age: 19}
//劫持数据
Object.keys(data).forEach(key => {
    observe(data, key, data[key])
})
//形成闭包 内部的变量不会消失
function observe(obj, key, value) {
    Object.defineProperty(obj, key, {
        get() {
            return value 
        },
        set(newValue) {
            value = newValue
            compile()
        }
    })
}
//获取元素 将数据放入
function compile(){
    let app = document.getElementById('app')
    //获取所有的子节点 包括很多节点 3 为text 节点 1为子标签节点
    app.childNodes.forEach( node => {
        if(node.nodeType === 1){
            //遍历该节点的属性 找出 v-text 
            //node.attributes是个类数组对象, 先转化为数组
            let result = Array.from(node.attributes).filter( key => {
                //结构属性的 nodeName 找到属性
                let { nodeName } = key 
                return nodeName === 'v-model'
            })
            if(result){
                node.value = data[result[0].nodeValue]
                addEventLisener('input', e => {
                        data[result[0].nodevalue] = e.target.value 
                    }
                )
            }
        }
    })

}
compile()

但目前的方法并不完美，需要添加一个防抖函数

let data = { name: 'Ton', age: 19}
//劫持数据
Object.keys(data).forEach(key => {
    observe(data, key, data[key])
})
//形成闭包 内部的变量不会消失
function observe(obj, key, value) {
    Object.defineProperty(obj, key, {
        get() {
            return value 
        },
        set(newValue) {
            value = newValue
            compile()
        }
    })
}
//获取元素 将数据放入
function compile(){
    let app = document.getElementById('app')
    //获取所有的子节点 包括很多节点 3 为text 节点 1为子标签节点
    app.childNodes.forEach( node => {
        if(node.nodeType === 1){
            //遍历该节点的属性 找出 v-text 
            //node.attributes是个类数组对象, 先转化为数组
            let result = Array.from(node.attributes).filter( key => {
                //结构属性的 nodeName 找到属性
                let { nodeName } = key 
                return nodeName === 'v-model'
            })
            if(result){
                node.value = data[result[0].nodeValue]
                addEventLisener('input', debounce(handel, result[0].nodeValue)
            }
        }
    })
    function debounce(fn, key, timer = 1000){
        let t = null
        return function(){
            if(t) { clearTimeout(t) }
            t= setTimeOut( _ => {
                t = null
                fn.call(this, key, arguments)
            },timer)
        }
    }
    function handel(key, event){
        data[key] = event.target.value
    }
}
compile()

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue限制文本输入框只允许输入字母、数字、禁止输入特殊字符

    vue限制文本输入框只允许输入字母、数字、禁止输入特殊字符

    这篇文章主要介绍了vue限制文本输入框只允许输入字母、数字、不允许输入特殊字符,通过监听表单输入的内容,使用方法的缺陷,本文通过实例代码介绍的非常详细,需要的朋友参考下吧
    2023-10-10
  • elementUI实现级联选择器

    elementUI实现级联选择器

    这篇文章主要为大家详细介绍了elementUI实现级联选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 详解vue2和vue3如何定义响应式数据

    详解vue2和vue3如何定义响应式数据

    这篇文章主要是来和大家一起讨论一下vue2和vue3是如何定义响应式数据的,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解下
    2023-11-11
  • vue实现一个滚动条样式

    vue实现一个滚动条样式

    滚动条能够给用户带来极好的体验效果，今天通过本文给大家分享vue实现一个滚动条样式，代码简单易懂，需要的朋友参考下吧
    2021-07-07
  • 详解滑动穿透(锁body)终极探索

    详解滑动穿透(锁body)终极探索

    这篇文章主要介绍了滑动穿透(锁body)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 基于vue实现分页组件的示例代码

    基于vue实现分页组件的示例代码

    分页组件是一种用户界面元素,用于在长列表或数据集中分割内容,分页组件是每个开发人员必须掌握的一个组件,广泛应用在各个场所,用以用户方便阅读等,本文就给大家介绍一下如何基于vue写出的分页组件,需要的朋友可以参考下
    2023-08-08
  • vue3中虚拟dom的介绍与使用详解

    vue3中虚拟dom的介绍与使用详解

    Vue 是如何将一份模板转换为真实的 DOM 节点的,又是如何高效地更新这些节点的呢,这些都离不开虚拟dom这个概念,下面我们就来了解下虚拟dom这个概念以及它是什么吧
    2024-01-01
  • 解决vue中el-date-picker type=daterange日期不回显的问题

    解决vue中el-date-picker type=daterange日期不回显的问题

    这篇文章主要介绍了解决vue中el-date-picker type=daterange日期不回显的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • vue实现点击复制到粘贴板

    vue实现点击复制到粘贴板

    这篇文章主要为大家详细介绍了vue实现点击复制到粘贴板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • vue3无config文件夹打包后页面空白问题及解决

    vue3无config文件夹打包后页面空白问题及解决

    这篇文章主要介绍了vue3无config文件夹打包后页面空白问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-05-05

最新评论