JS学习笔记（计算属性）

最新推荐文章于 2024-05-31 05:33:12 发布

dogeggcrazy

最新推荐文章于 2024-05-31 05:33:12 发布

阅读量718

点赞数

分类专栏：前端 JavaScript vue.js 文章标签： javascript 学习 vue.js

本文链接：https://blog.csdn.net/dogeggcrazy/article/details/127289293

版权

前端同时被 3 个专栏收录

22 篇文章 1 订阅

订阅专栏

JavaScript

18 篇文章 0 订阅

订阅专栏

vue.js

15 篇文章 0 订阅

订阅专栏

计算属性关键词：computed

计算属性在处理一些复杂逻辑时是很有用的。

以下是计算属性的基本结构

      new Vue({
            el:'',

            //数据
            data:{},
            //方法属性
            //事件绑定，不用reture，没有缓存
            methods:{},

            //侦听器（重视过程）
            watch:{
                要侦听的数据(){

                }
            },

            //计算属性（重视结果）
            //必须有retrun，只求结果，有缓存
            computed:{
                计算属性名(){
                     //经过一系列计算
                    return 处理操作后结果
                }
            }
            //计算属性的缓存特性
            //第一次调用计算属性是，会产生一个结果，这个结果会被缓存起来，后面每次用这个属性
            //当它的依赖项发生改变,会重新计算得到一个结果,再缓存起来。
        })

那么计算属性该如何使用？

以一个字符串反转为例

 <div id="app">
        <p>原始字符串：{{message}}</p>
        <p>计算反转后的字符串：{{wzx}}</p>
        <p>将原字符串转换为小写：{{d}}</p>
    </div>
    <script src="/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'helloworld'
            },
            computed: {
                //计算反转后的字符串
                wzx: function () {
                    //split()把一个字符串分割成字符串数组
                    //reverse()颠倒数组中元素的顺序
                    //join()把数组中的所有元素转换为一个字符串
                    return this.message.split('').reverse().join('')
                },
                //将大写转换为小写
                d(){
                    //substring(from,to)提取字符串中介于两个指定下标之间的字符
                    //toLowerCase()用于把字符串转换为小写
                    return this.message.substring(0,4).toLowerCase()
                },
                //?将原字符串的第一个字母转换为小写
                // substring(from, to)提取字符串中介于两个指定下标之间的字符
                // this.message.substring(0,1).toLowerCase+message.substring(1,7)
            }
        })
    </script>

上面的模板中声明了一个计算属性wzx。
提供的函数将用作属性wzx的getter（用于读取）。
wzx依赖于massage，在massage发生变化时，wzx也会更新。

运行结果如下图

事实上我们可以使用methods来代替computed，效果上它们都是一样的，都是computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新赋值。而使用methods，在重新渲染的时候，函数总会重新调用执行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="new.vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>你的firstName:{{firstName}}</p>
			<p>你的lastName:{{lastName}}</p>
			<p>你的fullName是从计算属性中得到的:{{fullName}}</p>
			<p>你的fullName是从计算属性中得到的:{{getFullName()}}</p>
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						firstName:'张',
						lastName:'三'
					}
				},
				methods:{
					getFullName(){
						return this.firstName + this.lastName
					}
				},
				computed:{
					fullName(){
						return this.firstName + this.lastName
					}
				}
			})
		</script>
	</body>
</html>

get和set的使用
计算属性中可调用set和get方法，get是获取值时进行调用，set是设置值时进行调用。

 <!-- 1.每一个计算属性都包含一个getter函数与setter函数
    2.计算属性会默认使用getter函数，setter函数并不常见，所以一般计算属性getter和setter都不写
    3.getter函数是默认用法，setter函数不是默认用法，如果要使用setter函数，必须手动写出setter函数
    4.setter函数内的形参是你要修改的值 -->
    <div id="app">
         姓: <input type="text" v-model="lastName"><br><br>
         名: <input type="text" v-model="fristName"><br><br>
         全名:{{fullName}}
        <button @click="btn">修改计算属性的值</button>
        </div>
  <script src="/vue.js"></script>
  <script>
      new Vue({
          el:'#app',
          data(){
              return{
                fristName:'地球',
                lastName:'大',
            
              }
          },
          computed:{
              fullName:{
                  //get:获取值时触发
                  //当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                  get(){
                      return this.fristName + '-'+this.lastName;
                  },
                  set(value){
                      console.log('set',value);
                      const arr = value.split('-')
                      this.fristName=arr[0]
                      this.lastName=arr[1]
                  }
              }
          },
          methods:{
              btn(){
                  this.fullName='大-火星'
              }
          }

      })
  </script>

通过getter我们可以获取对象中相关属性的值。我们可以理解为我们是定义了一个伪属性，我们读取这个伪属性的值时，它会按照我们定义好的规则返回对象的相关属性的值。
通过setter我们可以修改对象中的相关属性，同样我们也可以理解为我们定义了一个伪属性，当我们修改这个伪属性的值时，它会按照我们定义好的规则修改对象的相关属性。
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter