02-学习vue笔记分享-computed语法

最新推荐文章于 2024-01-18 13:34:43 发布

柯柯来康康

最新推荐文章于 2024-01-18 13:34:43 发布

阅读量239

点赞数

分类专栏： vue.js 学习知识分享 js 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_42647901/article/details/107218726

版权

问：Vue实例中computed和methods的区别？

methods与computed两个方法有很多相似之处，但是computed这个属性更加优化；

methods是页面重新渲染时，它的函数总是会重新调用执行，而computed计算属性是基于缓存依赖的，只有他的相关依赖发生改变时才会重新求值

computed可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回结果

所以如果在插值表达式中有过于复杂的运算，可以用computed计算属性

computed语法的基本使用

例如：拼接名字成一个完整名字

<body>
    <!-- 被app实例所控制的区域 -->
    <div id="app" v-if=true>
        <h2>{
  {firstName + " " + lastName}}</h2>
        <h2>{
  {firstName}} {
  {lastName}}</h2>
        <h2>{
  {getFullName()}}</h2>
        <h2>{
  {fullName}}</h2>
    </div>

    <script src="../vue.js"></script>
    <script>
        // 创建实例对象
        const app = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {
                firstName: "Lebron",
                lastName: "James"
            },
            methods: {
                getFullName() {
                    return this.firstName + &

最低0.47元/天解锁文章

柯柯来康康

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02-学习vue笔记分享-computed语法

问：Vue实例中computed和methods的区别？methods与computed两个方法有很多相似之处，但是computed这个属性更加优化；methods是页面重新渲染时，它的函数总是会重新调用执行，而computed计算属性是基于缓存依赖的，只有他的相关依赖发生改变时才会重新求值computed可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回结果所以如果在插值表达式中有过于复杂的运算，可以用computed计算属性 computed语法的基本使用例如...
复制链接

扫一扫