【Vue】我对Vue双向绑定的理解

忘是亡心i 2022-03-12 15:18 235阅读 0赞

#### v-model ####

从 Vue 0.x 开始，Vue 就用 v-model 来实现「双向绑定」。

如

data: {
        user: { name: 'frank'}
    }
    <input v-model="user.name">

能实现以下两个绑定：

[user.name][] 的变化自动同步到 input.value  
input.value 的变化自动同步到 [user.name][]  
但是当 FLUX 单向数据流兴起之后，Vue 的作者重新审视了「双向绑定」，发现「双向绑定」的一些问题之后，就更倾向于「单向绑定」了。v-model 被拆成两部分

data: {
        user: { name: 'frank'}
    },
    <input :value="user.name" @input="user.name = $event">

这样一来，数据的变更权就回到数据拥有者手上了。  
为了巩固单向数据流这一模式，Vue 规定子组件不能修改父组件传给它的 props，一旦发现就会打印出一个警告。  
单向数据流的优点：  
1，数据拥有者清楚地知道数据变化的原因和时机（因为是它自己操作数据的）  
2，数据拥有者可以阻止数据变化

#### .sync 修饰符 ####

例子:

<div :selected.sync="x"> 等价于 <div :selected="x" @update:selected="x = $event">

Vue.component('child',{
      props: ['selected'],
      template: `
        <div>
          selected: {
       {selected}}
          <hr>
          <button @click="$emit('update:selected',1)">1</button>
          <button @click="$emit('update:selected',2)">2</button>
        </div>
      `
    })
    var vm = new Vue({
      el: '#app',
      data:{
        value:2
      },
      template:`
      <div>
        爸爸
        <div style="border: 1px solid red;">
        <child :selected="value" @update:selected="selected=$event"></child>  
        </div>
      </div>
    `
    
    })

.sync 的作用和 v-model 一模一样，就是用双向绑定的语法糖，实现两个单向绑定。

[user.name]: http://user.name

发表评论取消回复

表情：

评论列表（有 0 条评论，235人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue数据双向绑定

5.Vue数据双向绑定 5.1.什么是双向数据绑定 Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的

刺骨的言语ヽ痛彻心扉/ 2024年03月30日 09:50/ 0 赞/ 102 阅读

相关 Vue 数据双向绑定

1. 前言本小节我们将介绍 Vue 中数据的双向绑定指令 v-model。v-model 的学习相对简单我们可以用 v-model 指令在表单、及元素上创建

一时失言乱红尘/ 2024年03月27日 08:47/ 0 赞/ 127 阅读

相关 Vue--双向绑定

原文网址：[Vue--双向绑定\_IT利刃出鞘的博客-CSDN博客][Vue--_IT_-CSDN] 其他网址 > [父子组件prop值的双向绑定][prop] 简

忘是亡心i/ 2022年12月21日 06:24/ 0 赞/ 242 阅读

相关 Vue双向绑定

实现mvvm的双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发

清疚/ 2022年11月27日 10:21/ 0 赞/ 215 阅读

相关 VUE双向绑定

1、什么是setter、getter ？　　答：首先，别误以为他们就是一会要说的get、set，我们先看一句定义： > 对象有两种属性：（1）数据属性，

r囧r小猫/ 2022年11月07日 13:16/ 0 赞/ 14 阅读

相关 vue实现双向绑定原理

原理： vue主要是借助对象的访问器属性（Object.defineProperty）劫持数据，并结合订阅者-发布者模式来实现数据双向绑定。通过Object.defi

╰半橙微兮°/ 2022年05月27日 04:26/ 0 赞/ 258 阅读

相关 VUE双向绑定

转自：http://www.cnblogs.com/qiuchuanji/p/8819697.html Vue是一个提供了MVVM风格的双向数据绑定的Javascr

小鱼儿/ 2022年05月23日 08:17/ 0 赞/ 347 阅读

相关【Vue】我对Vue双向绑定的理解

v-model 从 Vue 0.x 开始，Vue 就用 v-model 来实现「双向绑定」。如 data: { user: { name:

忘是亡心i/ 2022年03月12日 15:18/ 0 赞/ 236 阅读

相关 vue双向数据绑定的原理解析

简述每当面试官问到Vue数据双向绑定原理的时候，我们都会简单的说：Vue 内部通过 Object.defineProperty 方法属性拦截的方式，把data

你的名字/ 2021年09月20日 12:12/ 0 赞/ 334 阅读

相关 Vue的属性绑定和双向绑定

目录一点睛二代码三效果 -------------------- 一点睛 v-model：将标签的value值和Vue实例中的data属性值进行绑

冷不防/ 2021年07月24日 18:06/ 0 赞/ 574 阅读