怎样理解 Vue 的单向数据流?

2020-08-07 19:52发布

站内问答 / Vue.js
3045 6 7
发送
6条回答
苏橙C
2楼 · 2020-08-09 11:38

用户在view上操作通过action改变state里面的值同时state驱动view层显示，这就是一个闭环的单向数据流。在vue文档组件模块里有介绍到单向数据流主要是避免子组件修改父组件的状态出现应用数据流混乱的状态，避免不必要的理解，维持父子组件正常的数据依赖关系。

叮叮不叮咚
3楼 · 2020-08-09 11:52

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

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


我的网名不再改
4楼 · 2020-08-10 08:22

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

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

这里有两种常见的试图改变一个 prop 的情形：

这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：

props: ['initialCounter'],data: function () {
  return {
    counter: this.initialCounter  }}123456

这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

props: ['size'],computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }}123456

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

props: {
  list: {
    type: Array,
    default: (() => [])
  }},methods: {
  addFn () {
    this.list.push('newValue')
  }}1234567891011

单向数据流：父级 prop 的更新会向下流动到子组件中，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值


这个巴掌正适合你的脸
5楼 · 2020-08-10 10:56

级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

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


雨陵西 - 每一代青年都有自己的际遇和机缘
6楼 · 2020-08-13 18:06

数据从父级组件传递给子组件，只能单向绑定。

子组件内部不能直接修改从父级传递过来的数据。


三剑客
7楼 · 2020-11-23 20:34

父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解

相关问题推荐

  • vue3.0和vue2.0的区别有哪些，优点是什么2021-02-03 10:13
    回答 14

    1.重构响应式系统，使用Proxy替换Object.defineProperty，使用Proxy优势：•可直接监听数组类型的数据变化•监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升•可拦截apply、ownKeys、has等13种方法，而Object.define...

  • 怎么实现vue 跳转页面返回后回到原来的位置2021-04-16 13:39
    回答 12

    vue页面跳转后返回原页面初始位置        vue页面跳转到新页面之后，再由新页面返回到原页面时候若想返回调出原页面的初始位置，怎么来解决这个问题呢？首先我们应该在跳出页面时候记录下跳出的scrollY，返回原页面的时候在设置返回位置为记录下的scrolly...

  • MVVM和MVM的不同？2020-05-09 15:51
    回答 9

    这个问题建议你系统了解下MVC→MVP→MVVM的进化历程。（1）首先说下MVC    MVC全名是Model View Controller，是模型（model）－视图（view）－控制器（controller）的缩写。MVC开始是存在于桌面程序中，使用MVC的目的是将M和V的实现代码分离。从图里可以看...

  • 使用vue后怎么针对搜索引擎做SEO优化？搜索引擎 Vue.js 2020-05-26 16:30
    回答 13

    目前，对于SEO支持比较好的项目方案是采用服务端渲染。所以如果项目有SEO需求，那么比较好的方案是服务端渲染。如果你已经采用了前后分离的单页项目，而你的网站内容不需要AJAX去获取内容和展示内容，那么可以试试 prerender-spa-plugin 这个插件，这个插件是...

  • vue和bootstrap的区别2021-10-14 11:13
    回答 19

    Bootstrap和vue不是一个层级的东西.Bootstrap是在jquery时代的UI组件库，而且Bootstrap大部分组件是依赖css的，依赖jQuery的组件主要是有交互的弹窗组件、下拉菜单等

  • vue写一个界面按钮怎么调用另一个界面的弹窗2021-05-10 15:29
    回答 13

    首先你需要引入另一个界面，然后通过$refs.refName的方式调用弹框的方法后者直接把弹框的属性置成true。注意需要另一个页面渲染完成后才能用【$refs.refName】

  • 前端vue是不是现在比较常用的2020-09-27 20:50
    回答 16

    是的，前端不会Vue根本就没必要再聊下去了

  • vue大屏项目的适配问题2021-01-15 10:32
    回答 7

    这里有一篇文章可以帮助你https://blog.csdn.net/qq_40282732/article/details/105962708

  • 在vue框架下，如何调整echarts图表在移动端HTML5移动框架 2022-03-15 16:11
    回答 5

    内部图表大小是与div容器大小位置相关的，如果想调整图表大小位置，调整div的属性就可以。如果是想调整图表与div间上下左右留白，则设置grid属性就可以。

  • 在使用vue框架时，如何改变组件的大小？HTML5移动框架 2022-02-25 15:25
    回答 7

    使用 /deep/ 注意：使用 cass 和 less 只能使用 /deep/ 这个方法

  • vue中外部引入svg如何使用scss给svg添加2021-06-03 14:05
    回答 4

    创建icons/svg文件夹将svg文件放在该文件夹下面在components文件夹中创建svgiconfont.vue文件文件内容：        [removed]  import '@/icons'  export default {    name: 'svg-icon',    props: {      iconClass: {      ...

  • java小白求教为什么在data定义变量在方法使用Vue.js 2021-05-23 16:27
    回答 3

    引用数据类型数组的元素是对象引用,没有实际的值，需要给它实例。例如date days = new date[5];days[0]  = new date(2000,12,3)每一个days都要去分配。而基础类型都有默认初始值。

  • vue计算属性遇到的问题2021-05-23 13:28
    回答 5

    计算属性与响应式并不冲突对立的存在，计算属性往往是用于数据的聚合或者离散，数据响应式的话就是视图响应数据变动（先容我装个逼）在vue中就是通过watcher调用一次实例对象中data的数据（当然这层数据也会做一层映射，映射到实例的属性中）在数据的defineOb...

  • 用实例来展示 Vue 的过渡是如何实现的2021-04-26 15:37
    回答 3

    Vue中有一个自带的transition组件，就是用来实现过渡效果的，具体怎么使用呢，很简单，其实就两个步骤：①用transition组件，把要做过渡效果的元素包起来②写上相应的过渡效果的css是不是很简单，比把大象装冰箱还简单。然而，并没有，在这两个步骤中，我们要...

没有解决我的问题，去提问