vue中v-show你不知道的用法 created computed mounted的执行顺序

简介: vue中v-show你不知道的用法 created computed mounted的执行顺序

我们都知道,v-show的值是一个布尔类型的。


我通过这个值进行显示或者隐藏。


但是有些时候,这个值是true还是false,我们需要去进行计算


此时我们就可以使用v-show="XXX()"


通过XXX()这个方法来返回true或者false


 <div class="demo-div" v-show="comBoolenWay()">我是显示或者隐藏</div>
 methods: {
     comBoolenWay() {
          return true
     }
  },


如果这个数据不会频繁的发生该变,你也可以使用vue中的computed来进行缓存数据

conputed时有缓存的,当数据发生改变的时候,就会进行计算


<div class="demo2-div" v-show="showWay">显示====隐藏</div>
  dec: "1213",
   computed: {
        showWay: function () {
            return this.dec ? true : false;
        }
    },


当页面进行渲染的时候,就会去执行computed中的showWay方法,


如果值时true,这显示,否者就不显示。


我想问此时在created中写一个函数,computed中写一个函数 和 mounted中写一个函数


你知道函数的执行顺序吗


是created先执行。因为created是初始化data中的值。因此最先执行


然后是 执行computed中的,因为此时html正在被渲染,所以去执行computed


最后是monted()因为这个函数此时已经将页面渲染完成了。


 <div class="demo2-div" v-show="showWay">显示====隐藏</div>
      data(){
            return{
                 dec: "1213",
            }
      }
   created() {
        console.log("created");
    },
    mounted() {
        console.log("mounted");
    },
    computed: {
        showWay: function () {
            console.log("computed");
            return this.dec ? true : false;
        }
    },
相关文章
|
JavaScript 前端开发
vue学习(15)watch和computed
vue学习(15)watch和computed
295 58
Vue3 的 computed 和 watch 函数有哪些不同?
Vue3 的 computed 和 watch 函数有哪些不同?
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
JavaScript
Vue3基础(九)___computed
本文介绍了Vue 3中`computed`的两种用法:使用函数和使用对象。通过示例代码展示了如何创建只读的计算属性和可写的计算属性,以及它们在实际开发中的应用。文章还解释了`computed`属性如何依赖其他响应式数据,并在数据变化时更新。
293 0
Vue3基础(九)___computed
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
JavaScript
Vue 的父组件和子组件生命周期钩子执行顺序
在 Vue 中,父组件和子组件的生命周期钩子执行顺序如下:
|
缓存 JavaScript
Vue 中 computed 与 method 的区别
【10月更文挑战第15天】computed 和 method 是 Vue 中两个重要的选项,它们在功能和特点上存在着明显的区别。理解并合理运用它们的区别,可以帮助我们构建更高效、更具可维护性的 Vue 应用。在实际开发中,要根据具体情况灵活选择使用,以满足不同的需求。
376 2
|
JavaScript
|
缓存 JavaScript API
Vue3— computed的实现原理
【9月更文挑战第5天】Vue3— computed的实现原理
610 10
|
缓存 JavaScript Serverless
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
964 0