Vue：（七）计算属性_vue计算属性里写入 getparam(){ return { ...this.form, page-CSDN博客

本文链接：https://blog.csdn.net/weixin_41377877/article/details/127940422

计算属性

定义：要用的属性不存在，要通过已有属性计算得来
原理：底层借助了Object.defineproperty方法提供的getter和setter
get函数什么时候执行？

1. 初始读取时会执行一次
2. 当依赖的数据发生变化时会被再次调用

优势：与methods方式相比，内部有缓存机制（复用），效率更高，调试方便

备注：

计算属性最终会出现在vm上，直接读取使用即可
如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

插值语法实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>计算属性_插值语法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      姓：<input type="text" v-model="firstName" /><br /><br />
      名：<input type="text" v-model="lastName" /><br /><br />
      全名：<span>{{firstName.slice(0,3)}}-{{lastName}}</span>
    </div>
    <script type="text/javascript">
      new Vue({
        el: '#root',
        data: {
          firstName: '空谷',
          lastName: '有来人',
        },
      })
    </script>
  </body>
</html>

methods实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>计算属性_methods</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      姓：<input type="text" v-model="firstName" /><br /><br />
      名：<input type="text" v-model="lastName" /><br /><br />
      全名：<span>{{fullName()}}</span>
    </div>
    <script type="text/javascript">
      new Vue({
        el: '#root',
        data: {
          firstName: '空谷',
          lastName: '有来人',
        },
        methods: {
          fullName() {
            return this.firstName + '-' + this.lastName
          },
        },
      })
    </script>
  </body>
</html>

计算属性实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>计算属性_计算</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      姓：<input type="text" v-model="firstName" /><br /><br />
      名：<input type="text" v-model="lastName" /><br /><br />
      全名：<span>{{fullName}}</span>
    </div>
    <script type="text/javascript">
      const vm = new Vue({
        el: '#root',
        data: {
          firstName: '空谷',
          lastName: '有来人',
        },
        computed: {
          // 完成写法
          // fullName: {
          //   get() {
          //     return this.firstName + '-' + this.lastName
          //   },
          //   set(value) {
          //     const arr = value.split('-')
          //     this.firstName = arr[0]
          //     this.lastName = arr[1]
          //   },
          // },
          // 简写
          fullName() {
            return this.firstName + '-' + this.lastName
          },
        },
      })
    </script>
  </body>
</html>

我是空谷有来人，谢谢大家支持！