精华内容
下载资源
问答
  • 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:...
  • 熟悉vue的人都知道在vue2.x之前都是使用object.defineProperty来实现双向数据绑定的 而在vue3.0中这个方法被取代了 1. 为什么要替换Object.defineProperty 替换不是因为不好,是因为有更好的方法使用效率更高 Object...
  • 单向数据绑定:先有写好的模板,然后把模板和数据(可能来自...双向数据绑定:数据模型和视图之间的双向绑定,用户在视图上的修改会自动同步到数据模型中去,同样的,如果数据模型中的值发生了变化,也会立刻同步...
    • 单向数据绑定:先有写好的模板,然后把模板和数据(可能来自后台数据)整合到一起形成HTML代码,再将HTML代码插入到文档流里
      单向数据绑定缺点:HTML代码生成完后就难以改变,如果有新数据就必须把之前的HTML代码去掉,让新数据和模板重新整合插入到文档流里
      786645-20190529113659060-1499248502.png

    • 双向数据绑定:数据模型和视图之间的双向绑定,用户在视图上的修改会自动同步到数据模型中去,同样的,如果数据模型中的值发生了变化,也会立刻同步到视图中去
      双向数据绑定优点:无需进行和单向数据绑定的那些CRUD(Create,Retrieve,Update,Delete)操作
      双向数据绑定最经常的应用场景:表单,当用户在前端页面完成输入后,不用任何操作,我们就已经拿到了用户的数据存放到数据模型中了
      目前,实现双向数据绑定的前端框架主要有AngularJS,VueJS(通过引入vuex来实现单项的数据监控)等
      双向数据绑定缺点:Angular实现双向绑定的原理就是通过$watch来进行脏检查,如果是大量的检查就会低效率
      786645-20190529114115251-184545769.png

    • 单向数据绑定和双向数据绑定应用场景:
      单向绑定的优点是相应的可以带来单向数据流,这样做的好处是所有状态变化都可以被记录、跟踪,状态变化通过手动调用通知,源头易追溯,没有“暗箱操作”。同时组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性。缺点则是代码量会相应的增加,数据流转过程变长,从而出现很多类似的样板代码。同时由于对应用状态独立管理的严格要求(单一的全局store),在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用),会显得啰嗦及繁琐。
      双向绑定的优点是在表单交互较多的场景下,会简化大量业务无关的代码。缺点就是由于都是“暗箱操作”,我们无法追踪局部状态的变化(虽然大部分情况下我们并不关心),潜在的行为太多也增加了出错时 debug 的难度。同时由于组件数据变化来源入口变得可能不止一个,新手玩家很容易将数据流转方向弄得紊乱,如果再缺乏一些“管制”手段,最后就很容易因为一处错误操作造成应用雪崩。

    总结:我们要通过自己的业务场景合理的选择单双向数据绑定机制

    转载于:https://www.cnblogs.com/ButterflyEffect/p/10942947.html

    展开全文
  • 小猿圈解析vue数据双向绑定缺点

    千次阅读 2019-06-05 04:01:32
    下面小猿圈web前端老师就为你解析一下vue数据双向绑定的缺陷,希望对你有所帮助,下面我们一起了解一下吧。1、vue 实例创建后,再向其上添加属性,不能监听当创建一个Vue实例时,将遍历所有DOM对象,并为每个数据...

    vue是当今前端很流行的一种框架,但是vue也是有一定的缺陷的,你有过了解吗?下面小猿圈web前端老师就为你解析一下vue数据双向绑定的缺陷,希望对你有所帮助,下面我们一起了解一下吧。

    1、vue 实例创建后,再向其上添加属性,不能监听

    当创建一个Vue实例时,将遍历所有DOM对象,并为每个数据属性添加了get和set。get和set 允许Vue观察数据的更改并触发更新。但是,如果你在Vue实例化后添加(或删除)一个属性,这个属性不会被vue处理,改变get和set。

    如果你不想创建一个新的对象,你可以使用Vue.set设置一个新的对象属性。该方法确保将属性创建为一个响应式属性,并触发视图更新:

    function addToCart (id) {
    var item = this.cart.findById(id);
    if (item) {
    item.qty++
    } else {
    // 不要直接添加一个属性,比如 item.qty = 1
    // 使用Vue.set 创建一个响应式属性
    Vue.set(item, 'qty', 1)
    this.cart.push(item)
    }
    }
    addToCart(myProduct.id);
    复制代码

    2、数组

    Object.defineProperty的一个缺陷是无法监听数组变化。

    当直接使用索引(index)设置数组项时,不会被vue检测到:

    app.myArray[index]=newVal;

    然而Vue的文档提到了Vue是可以检测到数组变化的,但是只有以下八种方法,vm.items[indexOfItem]=newValue这种是无法检测的。

    push();
    pop();
    shift();
    unshift();
    splice();
    sort();
    reverse();
    复制代码

    同样可以使用Vue.set来设置数组项:

    Vue.set(app.myArray,index,newVal);复制代码

    3、proxy与defineproperty

    Proxy对象在ES2015规范中被正式发布,用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)。

    它在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。

    我们可以这样认为,Proxy是Object.defineProperty的全方位加强版,具体的文档可以查看此处;

    Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等,是Object.defineProperty不具备的。

    Proxy返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty只能遍历对象属性直接修改。

    Proxy作为新标准将受到浏览器厂商重点持续的性能优化,也就是传说中的新标准的性能红利。

    当然,Proxy的劣势就是兼容性问题,而且无法用polyfill磨平,因此Vue的作者才声明需要等到下个大版本(3.0)才能用Proxy重写。

    以上就是小猿圈web前端讲师给大家分享的vue数据双向绑定的缺点,正在学习前端的或者已处工作岗位的小伙伴们有所了解了吗?希望对你们们有所帮助,想要了解更多内容的小伙伴可以登录小猿圈官网了解。


    展开全文
  • Vue双向数据绑定

    2017-08-22 18:04:38
    observer会观察两种类型的数据 1.object 2.Array 对于Array类型的数据,由于Javasript的限制,vue不能检测到变化,会先重写操作数组的原型方法,当数组变化的时候触发notify方法 对于Object类型的护具,则...
    
    

    observer会观察两种类型的数据

    1.object

    2.Array

    对于Array类型的数据,由于Javasript的限制,vue不能检测到变化,会先重写操作数组的原型方法,当数组变化的时候触发notify方法

    对于Object类型的护具,则遍历他的每个key,使用getter和setter,实先在get时收集依赖,set时触发notify

    如果是动态添加上去的值,没有observer的get,set方法,所以需要使用set / $set进行设置监听

    展开全文
  • 详解单向数据流与双向数据绑定

    千次阅读 多人点赞 2019-06-06 17:54:58
    在学习和接触 Vue 的过程中,接触到 Vue 的两个特性,单向数据流与双向数据绑定,他们是什么,特点如何,以及彼此之间的关系和联系又有什么,接下来,我们深入的探究一下它们。 单向数据流 数据流,表明的是数据...

    在学习和接触 Vue 的过程中,接触到 Vue 的两个特性,单向数据流与双向数据绑定,他们是什么,特点如何,以及彼此之间的关系和联系又有什么,接下来,我们深入的探究一下它们。

    单向数据流

    在这里插入图片描述
    数据流,表明的是数据流向,用大白话说就是数据传递。那么单项数据流
    是我们的数据单一方向传输。对于 Vue 来说,组件之间的数据传递具有单向数据流这样的特性。

    首先对于父子组件来说,父组件总是通过 Props 向子组件传递数据。
    例如:

       <div id="app"> 
            <show-title></show-title> 
       </div> 
     <script>
            Vue.component('showTitle', {
                template: '<div>{{ title }}</div>',
                props: ['title']
            })
            new Vue({
                el: '#app',
                data: {
                    title: 'Hello Vue'
                }
            })
        </script>
    

    所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级
    prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。

    额外的,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为
    最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。

    对于改变 Props 中的值存在两种情况作为子组件的数据,并且在子组件中需要修改,在这种情况下,最好定义一个本地的 data 属性并将这个 prop 用作其初始值。

    Vue.component('showTitle', {
                template: '<div><input v-model="myTitle"/></div>',
                props: ['title'],
                data() {
                    return {
                        myTitle: this.title
                    }
                }
            })
    

    这个 prop 以一种原始的值传入且需要进行转换。在这种情况下,最好使用这个 prop 的值来定义一个计算属性: props: [‘size’], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() }}

    注意在 JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变这个对象或数组本身将会影响到父组件的状态。

    双向数据绑定

    当我们在前端开发中采用 MV*的模式时,M - model,指的是模型,也就是数据,V - view,指的是视图,也就是页面展现的部分。通常,我们需要编写代码,将从服务器获取的数据进行“渲染”,展现到视图上。每当数据有变更时,我们会再次进行渲染,从而更新视图,使得视图与数据保持一致。也就是:

    在这里插入图片描述
    而另一方面,页面也会通过用户的交互,产生状态、数据的变化,这个时候,我们则编写代码,将视图对数据的更新同步到数据,以致于同步到后台服务器。也就是:

    在这里插入图片描述
    能提现出来这种双向数据绑定的特点是 Vue 中的 v-model 指令代码如下:

    <div id="app"> 
        <input type="text" v-model="title"> 
      </div> 
     
       <script>
            new Vue({
                el: '#app',
                data: {
                    title: 'Hello Vue'
                }
            })
        </script>
    
    

    代码正确执行后,页面上 input 元素对应的位置会显示上面代码中给出的初始值:Hello Vue。

    由于双向数据绑定已经建立,因此:

    执行 vm.title = ‘vue’ 后,页面上 input 也会更新为显示: vue 在页面文本框中修改内容为:Javascript,则通过 vm.title 获取的值为:
    “JavaScript”
    双向数据绑定指的是单纯的数据与视图层之间的绑定。

    单向数据流与双向数据绑定的联系与区别

    对于非 UI 控件来说,不存在双向,只有单向。只有 UI 控件才有双向的问题。单向绑定使得数据流也是单向的,对于复杂应用来说这是实施统一的状态管理(如 Vuex)的前提。双向绑定在一些需要实时反应用户输入的场合会非常方便(比如表单提交)。但通常认为复杂应用中这种便利比不上引入状态管理带来的优势。

    对于 Vue 中的 v-model 来说,他是一个语法糖,利用 bind 语法与事件来实现数据与视图之间的绑定。
    v-model 可以理解下面这样的代码(不完全一致)

    实质上也是单向数据流在加上用户的操作事件来实现双向数据绑定。
    搞清楚双向绑定的实现原理之后,可以看到双绑跟单向绑定之间的差异只在于,双向绑定把数据变更的操作隐藏在框架内部,调用者并不会直接感知。

    单向绑定相应地使得数据流也是单向的,而在践行单向数据流的 Vuex 中,其实不过是在全局搞了一个单例的事件分发器 (dispatcher),开发者必须显式地通过这个统一的事件机制做数据变更通知。其实这种方式跟框架对 UI 控件 上实现双向绑定的方式是一样的。底层都是事件机制。试想一下,假设在双向绑定的应用中,我们有办法修改框架对 UI 控件 自动绑定的事件 listener 或 数据 watcher,然后加上类似 dispatcher 的逻辑,双向绑定背后的状态变化我们一样可以管理起来,一样可以享用单向数据流才有的收益。

    单向数据流和双向数据绑定有什么优缺点?单向数据流优缺点

    优点:

    1. 所有状态的改变可记录、可跟踪,源头易追溯;
    2. 所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性;
    3. 一旦数据变化,就去更新页面(data-页面),但是没有(页面-data);
    4. 如果用户在页面上做了变动,那么就手动收集起来(双向是自动),合并到原有的数据中。

    缺点:

    1. HTML 代码渲染完成,无法改变,有新数据,就须把旧 HTML 代码去掉,整合新数据和模板重新渲染;
    2. 代码量上升,数据流转过程变长,出现很多类似的样板代码;
    3. 同时由于对应用状态独立管理的严格要求(单一的全局 store),在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用),会显得啰嗦及繁琐。
    双向数据绑定的优缺点:

    优点:

    1. 用户在视图上的修改会自动同步到数据模型中去,数据模型中值的变化也会立刻同步到视图中去;
    2. 无需进行和单向数据绑定的那些相关操作;
    3. 在表单交互较多的场景下,会简化大量业务无关的代码。
      缺点:
    4. 无法追踪局部状态的变化;
    5. “暗箱操作”,增加了出错时 debug 的难度;
    6. 由于组件数据变化来源入口变得可能不止一个,数据流转方向易紊乱,若再缺乏“管制”手段,血崩。

    这样来看,单向绑定跟双向绑定在功能上基本上是互补的,所以我们可以在合适的场景下使用合适的手段。比如在 UI 控件 中(通常是类表单操作),我会使用双向的方式绑定数据;而其他场景则统一采用 单向 + inline event ( <component :msg=“msg” @update=“updateMsg(msg)”> ) 的方式构建应用。

    展开全文
  • 2、双向数据绑定 <input type="text" v-model="title" /> 3、自定义组件使用v-model双向数据绑定(在子组件修改父组件的变量) // 父组件 <parent v-model="age" /> // 子组件 <button @click=...
  • 单向数据绑定:指的是我们先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到...双向数据绑定:数据模型(Module)和视图(View)之间的双向绑定。 用户在视图...
  • 【AngularJs】Angular双向数据绑定

    万次阅读 2016-08-11 16:18:54
    1、什么是双向数据绑定双向数据绑定: Angular实现了双向绑定机制。所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面。即数据模型(Module)和视图(View)之间的双向绑定。例子...
  • 比较 React vue, 单项绑定 双向绑定缺点 React 单项: 优点:数据流更清晰,只有唯一的入口和出口,数据状态变化都能被记录、被跟踪,易于维护,调试也很方便,顺藤摸瓜,适用于大型复杂项目, 缺点:代码...
  • 双向数据绑定:保留了 angular 的特点,在数据操作方面更为简单; 组件化:保留了 react 的优点,实现了 html 的封装和重用,在构建单页面应用方面有着独特的优势; 视图,数据,结构分离:使数据的更改更为简单,不...
  • Vue中双向数据绑定是如何实现的?

    千次阅读 2020-07-23 19:27:30
    1.原理 View的变化能实时让Model发生变化,而Model的变化也能实时更新到View。 Vue采用数据劫持&发布-订阅模式的方式,通过ES5提供的Object....要实现Vue中的双向数据绑定,大 致 可 以 划 分 三 个 模 块:Obse
  • 数据双向绑定浅析

    万次阅读 2018-08-14 14:39:17
    近期看到一篇文章关于jquerymy.js ,是一个关于数据双向绑定的库,具体源码有4000多行,差不多是JQUERY源码的一半,还没有慢慢细读,就想先把之前对于angular和vue的双向数据绑定给梳理一下。 数据绑定其实跟框架...
  • 熟悉vue的人都知道在vue2.x之前都是使用object.defineProperty来实现双向数据绑定的 而在vue3.0中这个方法被取代了 1. 为什么要替换Object.defineProperty 替换不是因为不好,是因为有更好的方法使用效率更高 ...
  • 双向数据绑定、数据劫持 vue3.0以前用的Object.defineProperty()来实现响应式数据的 优点 监控对象 对于数组,重写数组里的方法 缺点: 需要分别对对象和数组(数组的变异方法)进行监控 如果新增了对象属性或...
  • 简述vue双向数据绑定原理

    千次阅读 2020-03-18 20:53:29
    MVVM MVVM全称是Model View ViewModel MVVM 由三部分组成分别是: M:Model ...我们需要在View中声明View(视图)上所显示的东西 与Model的哪部分的数据进行绑定。在ViewModel更新Model上的数据时,...
  • 双向数据绑定原理(三种实现方式)

    千次阅读 2019-01-06 22:00:37
    &lt;!DOCTYPE html&gt; &lt;html&gt; &...双向数据绑定原理(三种实现方式)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;input type="
  • 在react中是单向数据绑定,而在vue和augular中的特色是双向数据绑定。为什么会选择两种不同的机制呢?我猜测是两种不同的机制有不同的适应场景,查了一些资料后,总结一下。 一、各自优势 双向数据绑定给人的...
  • 通过 Proxy 实现数据双向绑定前言defineProperty 缺陷defineProperty 双向绑定Proxy 语法Proxy 双向绑定 前言 用过 Vue 的人都知道 Vue 有双向绑定的功能,Vue 2 是通过 Object.defineProperty 实现的双向绑定,但是...
  • 1. 简易表达Vue双向绑定数据的原理 VUE 实现数据双向绑定主要是: 采用数据劫持结合 “发布者 -订阅者”...2.解释单向数据流和双向数据绑定 单向数据流: 顾明思议,数据流是单向的。数据流动方向可以跟踪,流动单...
  • v-mode 双向数据绑定

    千次阅读 2019-04-20 11:21:33
    v-mode 双向数据绑定 效果 数据改 , 视图更 视图改, 数据更 实现 使用v-model实现 缺点 v-model默认绑定value属性, 所以v-model只能在表单使用 原理 为什么数据能直接在视图显示 v-model默认绑定了DOM对象的...
  • 双向数据绑定

    2017-10-07 22:44:15
    双向数据绑定
  • vue2.0实现双向数据绑定原理 vue2.0中通过利用Object.defineProperty方法监听属性的get和set方法来实现对数据的双向绑定,看如下示例: <!DOCTYPE html> <html> <head> <style> </...
  • React主要用于构建UI,单向数据流,可以是自定义组件,也可以是dom节点。 优点: 所见即所得,可以直观看到组件渲染的方式及功能。 服务端渲染,优化seo 虚拟dom,减少dom操作,具有兼容ie8的能力 diff算法,将O(n^...
  • </script> </body> </html> vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
  • 单向数据绑定:指的是我们先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成...单向数据绑定缺点:HTML代码一旦生成完以后,就没有办法再变了,如果有新的数据来了,那就必须把之前的HTML代码去掉...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,986
精华内容 9,194
关键字:

双向数据绑定缺点