vue双向数据绑定

Posted 2020-10-18 再多bug也要往前走

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue双向数据绑定相关的知识，希望对你有一定的参考价值。

我之前一直以为vue的双向数据绑定只有在视图中显式使用了才会进行视图的更新，今天发现当在某个方法中使用到某个变量时，该变量改变之后，会重新调用该方法，例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue双向数据绑定</title>
</head>
<body>
  <div id="app">
    <p>{{sel()}}</p>
  </div>
</body>
<script src="./libs/vue/vue.min.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      arr: [1, 2, 3]
    },
    methods: {
      sel: function () {
        return this.arr[0];
      }
    }
  })
</script>
</html>

在该例子中，我并没有在视图中绑定arr变量，而是调用的sel方法，发现在arr改变后，sel方法被重新调用了一次，视图也做了相应的修改

以上是关于vue双向数据绑定的主要内容，如果未能解决你的问题，请参考以下文章

vue数据双向绑定原理-observer

如何初始化片段中的绑定属性以使双向数据绑定工作