前端开发：Vue中数据绑定视图

时间：2024-10-23 11:15:40

Vue.js(通常简称为 Vue)是一个用于构建用户界面的渐进式 JavaScript 框架。与其他大型框架不同的是，Vue 被设计为可以逐步采用。核心库只关注视图层，并且非常容易上手，同时也很容易与其他库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。今天给大家分享——数据绑定视图，如果对有所帮助，麻烦关注收藏一下，联系我可以一起学习!

一般而言，一个对象是由多个key/value值对组成的无序集合，并且对象中的每个属性值可以是任意类型的，向对象添加属性时，可以是字面量或构建函数，如下代码：

var obj = new Object;  // 等价于obj = {}
obj.name = "张三";  //添加描述
obj.say = function(){};  //添加行为

除上述方式之外，还可以使用 Object.defineProperty 方法定义新属性或修改原有的属性值;在设置和获取属性时，可以使用setter和getter方法，前者用于设置对象的属性值，后者用于获取对象的属性值，如下代码：

var obj = {};
var initValue = 'hello';
Object.defineProperty(obj, "name2", {
     get: function () {
           //函数在获取值时触发
           return initValue;
     },
     set: function (value) {
           //函数在设置值时触发,新值通过参数 value 获取
           initValue = value;
     }
});
// 获取初始值
console.log(obj.name2);  // 输出"hello"
// 设置新值
obj.name2 = '李四';
// 输出设置的值
console.log(obj.name2); // 输出"李四"

对象中的 setter 和 getter方法不需要成对出现，根据需求按功能也可以单独添加;由于它们都是方法，因此，可以在执行方法过程中执行其他的功能，例如，在修改属性值时，重量页面中显示属性值的元素内容，实现数据同步绑定视图内容的效果，实例如下：

实例： 数据同步绑定视图内容

1)功能描述

在新建的页面中，添加一个input 文本输入框元素，并添加一个div 元素，当在文本框中输入内容时，div 元素中同步显示文本框中输入的内容。

2)实现代码

在项目components 文件夹的ch3子文件夹中，添加一个名为“dataView”的.html文件，在文件中加入如清单所示代码。

代码清单： dataView.html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>同步视图绑定的数据</title>
</head>

<body>
    <input type="text" id="txt">
    <div id="tip">...</div>
    <script>
        let txt = document.getElementById("txt");
        let tip = document.getElementById("tip");
        let obj = {
            name: ""
        }
        let temp = {}
        let propName = "name";
        Object.defineProperty(obj, propName, {
            set(v) {
                tip.innerHTML = v;
                temp[propName] = v;
            },
            get() {
                return temp[propName];
            }
        })
        txt.addEventListener("keyup", function () {
            obj[propName] = this.value;
        })
    </script>
</body>

</html>

3)页面效果

保存代码后，页面在Chrome浏览器下执行的页面效果如图所示。
在这里插入图片描述
4) 源码分析

在本示例的页面源码中，首先，使用对象的 defineProperty 方法获取和重置obj对象的“name”属性值，其次，在重置方法中，不仅修改了对象属性值，而且还将该属性值赋给div元素，最后，当文本框执行绑定的“keyup”事件时，需要重量对象的“name”属性，因此，触发了对象属性变更的setter 函数，在重置属性值的同步，将属性值同步显示在元素的内容中，这个过程实质上也是 Vue 中数据与视图绑定的原理。

在Vue 中，当把JavaScript 对象传给Vue实例的data选项时，Vue将遍历这个对象的全部属性，并使用Object.defineProperty将其全部转化为getter/setter 变更形式，并在组件渲染时，记录属性与视图的依赖关系，根据这种依赖关系，当setter函数再次被调用时，会通知watcher重新计算并更新其关联的所有组件，最终实现数据双向同步的功能。
在这里插入图片描述

相关文章