Vue 计算属性和监视属性

最新推荐文章于 2023-07-12 23:51:02 发布

Ejing6747

最新推荐文章于 2023-07-12 23:51:02 发布

阅读量129

点赞数

分类专栏： VUE基础文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/LIUYJ520/article/details/126667335

版权

VUE基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

计算属性

<!-- 计算属性：
				1.定义：要用的属性不存在，要通过已有属性计算得来。
				2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
				3.get函数什么时候执行？
							(1).初次读取时会执行一次。
							(2).当依赖的数据发生改变时会被再次调用。
				4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
				5.备注：
						1.计算属性最终会出现在vm上，直接读取使用即可。
						2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

<body>
  <div id="root">
      姓：<input type="text" v-model:value="firstName" /><br />
      名：<input type="text" v-model:value="lastName" /><br />
      姓名：<span>{{fullName}}</span>
    </div>
  </body>
  <script>
    //计算属性是通过属性计算得到的属性data放属性，computed放计算属性
    const vm = new Vue({
      el: "#root",
      data: {
        firstName: "张",
        lastName: "三",
      },
      computed: {
        fullName: {
          //当有人读取fullName时，则调用getter，调用后有缓存，
          //get什么时候调用？1.初次读取fullName的时候。2.所依赖的数据发生改变的时候

          get() {
            //get()中的this指向的是vm,如果写成箭头函数对象就是window
            const fullName = this.firstName + "-" + this.lastName;
            return fullName;
          },
          set(value) {
            //set不是必须写，只有需要修改才需要写
            const arr = value.split("-");
            this.firstName = arr[0];
            this.lastName = arr[1];
          },
        },
      },
    });
  </script>

监视属性

<!--
	监视属性watch：
	1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
	2.监视的属性必须存在，才能进行监视！！
	3.监视的两种写法：
		(1).new Vue时传入watch配置
		(2).通过vm.$watch监视
						    <!--
	深度监视：
		(1).Vue中的watch默认不监测对象内部值的改变（一层）。
		(2).配置deep:true可以监测对象内部值改变（多层）。
-->

 <body>
    <div id="root">
      <h2>今天天气很{{info}}</h2>
      <button @click="change">切换天气</button>
      <hr />
      <h3>a的值是:{{number.a}}</h3>
      <button @click="number.a++">点我a++</button>
      <h3>b的值是:{{number.b}}</h3>
      <button @click="number.b++">点我b++</button>
    </div>
  </body>
  <script>
    const vm = new Vue({
      el: "#root",
      data: {
        isHot: true,
        number: {
          a: 1,
          b: 1,
        },
      },
      computed: {
        info() {
          return this.isHot ? "炎热" : "凉爽";
        },
      },
      methods: {
        change() {
          this.isHot = !this.isHot;
        },
      },
      watch: {
        isHot: {
          immdiate: true, //初始化时让handler被调用一下。
          handler(newValue, oldValue) {
            console.log("isHot被修改了");
          },
        },
        //需求：只监视a的变化，isHot也应该有""号，因为只有一级被省略了
        "number.a": {
          handler() {
            console.log("a被改变了");
          },
        },
        //监视多级结构中中数据的改变
        number: {
          deep: true, //watch默认不监视属性内部值的改变，外部number地址不变则表示没变
          //所以应该开启deep，这样内部改变外部才能被检测到。
          handler() {
            console.log("number被改变了");
          },
        },
      },
    });

    //$watch是watch的简写
    // vm.$watch("isHot", {
    //   immdiate: true, //初始化时让handler被调用一下。
    //   handler(newValue, oldValue) {
    //     console.log("isHot被修改了");
    //   },
    // });
  </script>