Vue.js

最新推荐文章于 2025-08-19 14:08:19 发布

原创最新推荐文章于 2025-08-19 14:08:19 发布 · 264 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #Object.defineProperty

本文介绍了Vue.js框架，对比了框架与库的区别，阐述了Vue.js使用MVVM架构模式实现双向数据绑定。当数据写在data选项时，Vue会为属性设置getter和setter。还介绍了Object.defineProperty方法，Vue.js利用它实现数据双向绑定，达到响应式目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.js

什么是框架？什么是库

其实框架是有一套自己的生态系统的（vue.js）
而库是没有自己的生态系统的，它就是一个工具（jQuery）

查看vue.js的源代码
使用的是全局变量形式
jsx( javascript + xml )

使用script标签引入Vue.js
实例化全局暴露的变量Vue构造器函数得到一个实例
配置Vue构造器函数中的配置项，一个配置项一个功能
------ el – 将id为app的一部分DOM结构当做模板传入配置项，然后挂载在页面中
------data – 用来定义数据的
将数据展示在视图中，通过使用双大括号语法（ mustache 语法）来展示数据
这时候我们发现在我们的模板（DOM结构）中可以使用 javascript语法，那么我们把这个类型称之为 ‘jsx语法糖’
当我们将数据修改后发现，视图就会更新，这种情况我们称之为‘数据驱动（视图）’

既然Vue是一个框架，那么它使用了什么架构模式？

目前我们市面上基本上是以 MVC 这个架构思维为主
Vue使用 MVC 的衍生的模式，这个模式叫做 MVVM
MVC
Backbone.js
MVP
MVVM
名词解释：
----- M Model 表示数据
----- V View 表示视图
----- P/C/VM Presenter/Controller/ViewModel(视图模型) 表示就是逻辑
Vue使用的是MVVM
Vue中 VM改变，那么 V也会改变，反之也是一样的，我们称之为 ‘双向数据绑定’
数据驱动/ 双向数据绑定的原理 / 深入响应式的原理

-----当我们将数据写在data选项时， Vue会通过observer将data对象中的所有的属性都设置上getter和setter
-----当我们将数据绑定在视图时，自动触发getter，会将默认值，展示在视图
-----当我们通过视图修改数据是，会自动触发setter,将数据修改，同时视图也会发生更新

这边我们提到了双向数据绑定的原理的问题，下面我们可以深入一下：我们可以从Object.defineProperty中看vue的双向数据的绑定

什么是Object.defineProperty？

Object.defineProperty是ES5中的方法，它可以直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。vue.js正式利用这种方法实现数据的双向绑定,以达到响应式的目的。

语法：Object.defineProperty(object, propertyname, descriptor) （必须三个参数）

------object：要在其上添加或修改属性的对象。
------propertyname：一个包含属性名称的字符串。就是需要定义的属性和方法。
------descriptor:可以包含以下属性，默认情况下， writable， enumerable，configurable值为false

访问器 set和get

set();一旦属性被重新赋值，此方法被自动调用。
get();一旦属性被访问读取，此方法被自动调用。

<body>
  <input type="text">
  <div class="box"></div>
</body>
<script>
 var box = document.querySelector('.box')
    var input = document.querySelector('input')
    var obj = {
      a: ' I love you '
    }

    Object.defineProperty( obj , 'a' , {
      get () {
        return 'I do not love you ' //设置当前属性的初始值
      },
      set ( value ) {
        console.log( value )
        box.innerHTML = value
        console.log( obj )
      }
    })
    input.onchange = function () {
      obj.a = input.value
      return ;
    }
    box.innerHTML = obj.a
</script>

初始
在这里插入图片描述
重新赋值