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

忘是亡心i 2022-03-12 15:18 242阅读 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 条评论，242人围观）

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

相关阅读

相关 vue数据双向绑定

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

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

相关 Vue 数据双向绑定

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

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

相关 vue双向绑定

讲的非常清楚的一篇博客，感谢博主[https://www.jianshu.com/p/e7ebb1500613][https_www.jianshu.com_p_e7ebb15

雨点打透心脏的1/2处/ 2023年05月30日 06:17/ 0 赞/ 28 阅读

相关 Vue--双向绑定

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

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

相关 Vue双向绑定

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

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

相关 VUE双向绑定

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

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

相关 VUE双向绑定

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

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

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

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

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

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

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

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

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

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

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