Vue2（二）：计算属性、监视属性、二者的区别

起什么名字好呢！

于 2025-07-29 17:57:41 发布

阅读量856

点赞数 12

CC 4.0 BY-SA版权

分类专栏： Vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_51234063/article/details/149739820

Vue2学习笔记：第一章

一、计算属性

顾名思义，计算属性就是计算出来的属性，英文名儿computed
这里要和data和methods里的东西区分，data里的属性，methods里的函数，你写的都会原封不动放到vm里，但是computed里面的东西写的是对象，最后放到vm里的是这个对象的名，值是get里的返回值。

1. 例子: 使用插值语法和methods拼接姓名

使用插值语法，如果简单点还行，如果复杂了，里面的逻辑写一大堆，很难看
使用methods不错，但是有一个问题，就是每次用到fullName都会调用一次，缓存太多

  <body>
    <div id="root">
      姓: <input type="text" v-model="firstName"><br><br>
      名: <input type="text" v-model="lastName"><br><br>
      <!-- 拼接姓名实现"张-三"联动 -->
      <!-- 第一种实现:使用插值语法(字符串的slice方法,左闭右开截取字符串) ,麻烦-->
      姓名: <span>{
   
   {
   
   firstName.slice(0,3)}}-{
   
   {
   
   lastName}}</span><br><br>


      <!-- 第二种实现:使用methods,每次用到都会调用一次,而计算属性只调用第一次就欧了-->
      姓名: <span>{
   
   {
   
   fullName()}}</span><br><br>
      姓名: <span>{
   
   {
   
   fullName()}}</span><br><br>
      姓名: <span>{
   
   {
   
   fullName()}}</span><br><br>
      姓名: <span>{
   
   {
   
   fullName()}}</span><br><br>
      姓名: <span>{
   
   {
   
   fullName()}}</span>
    </div>
  </body>

  <script>
    new Vue({
   
   
      el: '#root',
      data: {
   
   
        firstName: '张',
        lastName: '三'
      },
      methods: {
   
   
        fullName() {
   
   
          console.log('调用')
          return this.firstName.slice(0, 3) + '-' + this.lastName
        }
      }

    })
  </script>

2. 使用计算属性拼接姓名

1、没有缓存问题，第一次调用之后就不会再调用，节省内存。除非依赖的值变化。
2、计算属性里面的属性要写成对象的形式，每个对象里面都有getter和setter方法
3、fullName实际上就是firstName和lastName经过一番计算得到的玩意儿，直接到vm身上成为vm的属性
4、当有人读取fullName时,get调用,返回值作为fullName的值
5、set什么时候调用? fullName被修改时调用，这里边呢有个连锁反应,我手动修改vm.fullName导致firstName和lastName被修改,Vue模板重新解析，页面刷新,firstName和lastName的修改又导致get被重新执行(依赖的数据变了),返回新的fullName，计算属性计算属性,就是一直在计算,所以要想改fullName,必须改它依赖的值才行。

  <body>
    <div id="root">
      姓: <input type="text" v-model="firstName"><br><br>
      名: <input type="text" v-model="lastName"><br><br>
      <!-- 拼接姓名实现"张-三"联动 -->

      <!-- 使用计算属性,只调用一次,非常奈斯,节省内存 -->
      姓名: <span>{
   
   {
   
   fullName}}</span><br><br>
      姓名: <span>{
   
   {
   
   fullName}}</span><br><br>
      姓名: <span>{
   
   {
   
   fullName}}</span><br><br>
      姓名: <span>{
   
   {
   
   fullName}}</span><br><br