Vue-3 计算属性与侦听器

根据慕课网的课程做的笔记

计算属性与侦听器

  • 侦听器:watch
  • 计算属性:computed
  • 使用场景

侦听器:watch


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>title>
    <script type="text/javascript" src="../scripts/vue.js">script>
head>
<body>
<div id="app">
{{msg}}
div>
<script>
  var app=  new Vue({
        el: "#app",
        data: {
            msg: "hello Vue!"
        },
        watch: {
            msg: function (newVal,oldVal) {
                console.log("最新的值为:" + newVal);
                console.log("以前的值为:"+oldVal);
            }
        },
        computed: {}
    });
script>
body>
html>

Vue-3 计算属性与侦听器_第1张图片
Vue-3 计算属性与侦听器_第2张图片

计算属性:computed


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>title>
    <script type="text/javascript" src="../scripts/vue.js">script>
head>
<body>
<div id="app">
{{msg}}
<p>{{msg1}}p>
div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            msg: "hello Vue!"
        },
        watch: {
            msg: function (newVal, oldVal) {
                console.log("最新的值为:" + newVal);
                console.log("以前的值为:" + oldVal);
            }
        },
        computed: {
            msg1: function () { 
            return 'computed:'+this.msg
            }
        }
    });
script>
body>
html>

Vue-3 计算属性与侦听器_第3张图片
Vue-3 计算属性与侦听器_第4张图片

watch与computed区别


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>title>
    <script type="text/javascript" src="../scripts/vue.js">script>
head>
<body>
    <div id="app">
        {{msg}}<br />
        count= {{count}}<br />
        (count+1)*2={{(count+1)*2}}<br />
        计算属性computed:{{this.msg1}}<br />
        <button type="button" v-on:click="submit">点击一次,count+1button>
    div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                msg: "Hello Vue!!",
                count: 0
            },
            methods: {
                submit: function () {
                    this.count++;
                }
            },
            watch: {
                msg: function (newVal, oldVal) {
                    console.log("最新的值为:" + newVal);
                    console.log("以前的值为:" + oldVal);
                }
            },
            computed: {
                msg1: function () {
                    return "computed:" + this.msg + "--" + this.count;
                }
            }
        });
    script>
body>
html>

计算属性computed:msg和count是msg1的组成部分,当msg或者count值变化时,都会触发computed中定义的函数,会使msg1改变,而侦听器只是侦听了msg的值的变化,只有msg值变化时,才会触发watch中定义的函数
Vue-3 计算属性与侦听器_第5张图片
Vue-3 计算属性与侦听器_第6张图片

你可能感兴趣的:(Vue,vue,watch,computed,Vue,计算属性,Vue侦听器)