new Vue() 成员

el

该 Vue() 对象绑定在哪个元素上

		<div id="app111">

		</div>
		
		<!-- Script -->
		<script>
		new Vue({
		  el: '#app111'
		})
		</script>

data

绑定数据

computed vs methods vs watch

三者能打到同样的效果。

基础的计算用 computed，大多数情况应该尽量用 computed。

不想缓存计算结果，每次调用都要重新计算函数用 methods。

数据变化时执行异步或开销较大的操作时用 watch。

下面程序有个疑问：timeVar 注释掉后 ctime2() 也不会实时更新了。

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
        <title>LeetCode -baicaihenxiao</title>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- My Stylesheets -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/baicaihenxiao/js@latest/cserclub-common.css">

        <link rel="shortcut icon" type="image/jpg" href="https://gitee.com/baicaihenxiao/imageDB/raw/master/luxun.jpg">
    </head>


    <div id="app">

        {{ msg }}

        <!-- Console 里改变 msg，gsmComputed 和 gsmMethod() 会同时更新。  -->

        <p> {{ gsmComputed }} </p>

        <p> {{ gsmMethod() }} </p>

        <p> {{ ctime2() }} </p>
        
        <!-- 把这行注释掉 ctime2() 也不会变了 -->
        <p> {{ timeVar }} </p>

        <!-- <p> {{ Date.now() }} </p> -->


    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "hi vue",
                timeVar: "2222"
            },
            mounted: function() {
                setInterval(function() {
                    this.ctime1()
                }.bind(this), 1000);

                setInterval(function() {
                    this.ctime2()
                }.bind(this), 1000)
            },
            computed: {
                gsmComputed: function() {
                    return this.msg.split('').reverse().join('')
                },
            },
            methods: {
                ctime1: function() {
                    this.timeVar = new Date().toLocaleTimeString()
                },
                ctime2: function() {
                    return new Date().toLocaleTimeString()
                },

                gsmMethod: function() {
                    return this.msg.split('').reverse().join('')
                }
            }
        });
        // vm.msg = "hi....";
    </script>

    </body>
</html>

computed

对于比较复杂的计算逻辑，不要直接在 {{}} 中写，放在 computed 里。

变量是根据 data 中已有的数据算出来的，用 computed，依赖的数据变动会导致该变量及时更新。下面的例子中，当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。

computed 的变量默认只有 getter，即只能读取，意味着不能直接修改 vm.reversedMessage，只能通过修改 vm.message 来达到目的。可以自定义 setter 方法。

计算属性是基于它们的响应式依赖进行缓存的。即只在依赖变量变动时才执行一次函数并缓存结果，别人每次 get 该 computed 的值时直接拿缓存结果，不会再执行函数。比如 message 从 Hello 变成 woo 时，reversedMessage 会重新计算，但以后每次访问 reversedMessage 都不会再重新计算了，除非 message 再变动。

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

<script>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

methods

和 computed 不同的是不会缓存结果，每次调用都会执行函数。

其余好像和 computed 一样，依赖的变量变动也会导致 methods 执行。

<p>Reversed message: "{{ reversedMessage() }}"</p>

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

watch

可以观察和响应 Vue 实例上的数据变动，能打到和 computed methods 一样的效果，但是基础的计算最好使用 computed，避免滥用 watch。

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

可以看一下官方示例，访问了网络。

Previous常用v-命令 NextVuePress安装使用

Last updated 4 years ago

hashtagel

hashtagdata

hashtagcomputed vs methods vs watch

hashtagcomputed

hashtagmethods

hashtagwatch

el

data

computed vs methods vs watch

computed

methods

watch