Vue中的options选项

最新推荐文章于 2024-10-15 19:36:48 发布

DangR-Jisoo

最新推荐文章于 2024-10-15 19:36:48 发布

阅读量1.6k

点赞数

分类专栏： Vue 前端

本文链接：https://blog.csdn.net/Angela_Connie/article/details/114239491

版权

前端同时被 2 个专栏收录

45 篇文章 2 订阅

订阅专栏

Vue

18 篇文章 2 订阅

订阅专栏

Vue中的options选项

el
类型：string(’#app’)或HTMLElement(document.querySelector(’#app’))
作用：决定Vue实例会管理哪一个DOM
data
类型：Object或Function
作用：Vue实例对应的数据对象
methods
类型：{[key: string]:Function}
作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用
computed
类型：{[key: string]:Function}
作用：定义vue的计算属性，可以在其他地方调用，也可以在指令中使用，本质是一个属性而不是一个函数，在调用时不用加小括号
注意computed和methods的区别：无论调用多少次computed，只会起一次效果，而对于methods，调用多少次就会执行多少次，methods没有缓存，性能相对于computed更低一点,而computed会进行缓存，如果使用多次时，计算属性只会调用一次
例如：

<body>
    <div id="app">
    	<h2>{{fullName}}</h2>//使用computed方法不需要加括号
    	<h2>{{fullName}}</h2>
    	<h2>{{fullName}}</h2>
    	<h2>{{fullName}}</h2>
    	<h2>{{fullName}}</h2>//调用了5次，但是控制台只显示一次’-------------‘
    	<h2>{{getFullName()}}</h2>//使用methods方法需要加括号
    	<h2>{{getFullName()}}</h2>
    	<h2>{{getFullName()}}</h2>
    	<h2>{{getFullName()}}</h2>
    	<h2>{{getFullName()}}</h2>//调用了5次，控制台显示五次’-------------‘
    </div>
    <script>
        const app = new Vue({
            el: "#app",//el
            data: {
                firstName: 'Kim',
                lastName: 'Jisoo'
            },//data
            computed: {
                fullName: function() {
                    console.log('-------------');//此处为了区别computed与methods
                    return this.firstName + ' ' + this.lastName;
                }
            },//computed
            methods: {
                getFullName: function() {
                    console.log('-------------');//此处为了区别computed与methods
                    return this.firstName + ' ' + this.lastName;
                }
            }//methods
        })
    </script>
</body>

综上所述，使用computed比methods性能更高！