Vue：计算属性与监视属性(1)

2401_84411557

于 2024-04-27 04:57:47 发布

阅读量284

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84411557/article/details/138237193

版权

</div>

2、通过方法实现

编写一个方法，返回值为两者拼在一起的字符串

<div id="root">

    姓：<input type="text" v-model="fistName"><br><br>

    名：<input type="text" v-model="lastName"><br><br>

    <!-- 只要数据发生改变，这个方法就会再被调用一次 -->

    姓名：<span>{{fullName()}}</span>

</div>

new Vue({

    el:'#root',

    data:{

        fistName:'张',

        lastName:'三'

},

    methods: {

        fullName(){

            return this.fistName + this.lastName;

},

})

3、通过计算属性

计算属性就是vue中的computed，这里面存放的是计算属性

而data中的是属性，两者不一样


    <div id="root">

        姓：<input type="text" v-model="fistName"><br><br>

        名：<input type="text" v-model="lastName"><br><br>

        姓名：<span>{{fullName}}</span>

    </div>


const vm = new Vue({

        el:'#root',

        //属性

        data:{

            fistName:'张',

            lastName:'三'

        },

        // 计算属性

        computed:{

            fullName:{

                //当有人读取fullName时，get就会被调用，返回值为fullName的值

                //get调用时机

                //1、初次读取fullName

                //2、所依赖的数据变化时

                get(){

                    //这里的this是指vm

                    return this.fistName + this.lastName;

                },

                //当fullName被调用时候调用

                set(value){

                    const arr = value.split('-')

                    this.fistName = arr[0]

                    this.lastName = arr[1]

                }

            }

        }

    })

计算属性和方法的编写方式有点区别

{{}}中方法是写一个方法的，即带括号

但是计算属性只需要写名字即可，不用带花括号

计算属性中要编写两个方法，一个是get方法，另一个是set方法

当有人读取fullname这个计算属性，get方法就会被调用，返回值是fullname的值
当有人修改fullname这个计算属性，set方法就会被调用

当明确只有get方法，不需要set方法的时候，计算属性可以简写成如下：


            fullName(){

                return this.fistName + this.lastName;

            }

get函数什么时候执行：

初次读取时会执行一次

当依赖的数据发生变化时会被调用一次

3.1、计算属性的优势

相对于方法来说，计算属性内部有缓存机制（复用），效率更好，调试更方便

简单来说，倘若计算属性不变，计算属性的数据就会存进缓存中，当页面上的其他数据需要读取这个计算属性的话，不再需要从vm获取，直接从缓存里面获取

二、监视属性

=========================================================================

监视属性可以监视某个属性的变化，并且可以获取变化前和变化后的数值

通过关键词watch实现


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <script type="text/javascript" src="../js/vue.js"></script>

  </head>



  <body>

    <div id="root">

      <h2>今天天气很{{info}}</h2>

      <button @click="changgeWeather">切换天气</button>

    </div>

  </body>

  <script>

    Vue.config.productionTip = false;



    const vm = new Vue({

      el: "#root",

      data: {

        isHot: true,

      },

      computed: {

        info() {

          return this.isHot ? "炎热" : "凉爽";

        },

      },

      methods: {

        changgeWeather() {

          this.isHot = !this.isHot;

        },

      },

      // 监视

      //适用于一开始很明确地知道要监视谁

      watch: {

        isHot: {

          //初始化时让handler调用一下

          immediate: true,

          //什么时候调用？当isHost发生改变时

          handler(newValue, oldValue) {

            console.log("isHost被调用", newValue, oldValue);

          }

        },

      // }

    });



  </script>

</html>

例如如上案例，当isHost被修改的时候，监视属性中的isHost中的handler就会被调用

而 immediate: true 的作用是再初始化的时候调用一下这个监视属性

注意的是监视属性必须存在，才可以进行监视

除了以上邪恶写法，还可以通过vm.$watch监视


    vm.$watch("isHost", {

      //初始化时让handler调用一下

      immediate: true,



#### css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解


![](https://img-blog.csdnimg.cn/img_convert/71b05b5bc66f98212257879cc09ca199.webp?x-oss-process=image/format,png)

#### js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？


![](https://img-blog.csdnimg.cn/img_convert/e3696c26df9a454a53d11fd2f31e2f7a.webp?x-oss-process=image/format,png)

g-kejLks42-1714165055938)]

#### js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？


[外链图片转存中...(img-cD5DlpdP-1714165055939)]

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

2401_84411557

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue：计算属性与监视属性(1)

/div>2、通过方法实现编写一个方法，返回值为两者拼在一起的字符串3、通过计算属性计算属性就是vue中的computed，这里面存放的是计算属性而data中的是属性，两者不一样计算属性和方法的编写方式有点区别计算属性中要编写两个方法，一个是get方法，另一个是set方法当有人读取fullname这个计算属性，get方法就会被调用，返回值是fullname的值当有人修改fullname这个计算属性，set方法就会被调用。
复制链接

扫一扫