（VueJs）计算属性和methods的对比，以及ES6的语法

最新推荐文章于 2023-05-14 16:30:59 发布

黑胡子大叔的小屋

最新推荐文章于 2023-05-14 16:30:59 发布

阅读量403

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lzl980111/article/details/104728142

版权

前端专栏收录该内容

75 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>

    <h2>{{getFullName()}}</h2>
    <h2>{{getFullName()}}</h2>
    <h2>{{getFullName()}}</h2>
    <h2>{{getFullName()}}</h2>

</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            FirstName: '科比',
            LastName: '布莱恩特'
        },
        computed:{
            fullName:{
            //这里的set方法省略，即设为只读属性
                get:function () {
                    console.log('fullName');
                    return this.FirstName+' '+this.LastName
                }
            }
        },
        methods:{
            getFullName:function () {
                console.log('getFullName');
                return this.FirstName+' '+this.LastName
            }
        }
    })
</script>

</body>
</html>

执行结果：
在这里插入图片描述
其中fullName调用一次，而getFullName调用了四次
计算属性相对于methods，多次调用时只会调用一次，而methods调用几次执行几次，没有缓存，性能更低

有关var和let的相关补充
js中if、for没有块级作用域，只有function中有作用域，因此必须借助function的作用域来解决应用外面的变量问题，闭包
var没有块级作用域，会引起if、for、变量有关作用域的相关问题
如何解决var没有作用域导致的for问题：闭包；原理：函数有作用域

var btns=document.getElementsByTagName('button');
for(var i=0;i<btns.length;i++){
	(function (num){
		btns[i].addEventListener('click',function(){
			console.log(num+'按钮点击');
		})
	)}(i)
}

建议：弃用var，优先使用const，只有需要改变某一个标识符的时候再使用let
const：不可修改（常量），必须赋值，常量含义是指向的对象不可修改，内部属性还是可以修改的

对象自变量的增强

    //属性的增强写法

    //ES5写法
    const name='张三';
    const age=18;
    const obj5={
        name:name,
        age:age
    }
    //ES6写法
    const obj6={
        name,
        age
    }
    console.log(obj5);
    console.log(obj6)

在这里插入图片描述

    //函数的增强写法
    //ES5的写法
    const obj5={
        run:function () {

        },
        eat:function () {

        }
    }
    //ES6写法
    const obj6={
        run(){
            
        },
        eat(){
            
        }
    }