vue计算属性和监听属性

最新推荐文章于 2025-03-16 08:57:57 发布

self_challenge

最新推荐文章于 2025-03-16 08:57:57 发布

阅读量1.9k

点赞数 4

文章标签： vue javascript js

本文链接：https://blog.youkuaiyun.com/self_challenge/article/details/104619714

版权

本文详细介绍了Vue中的计算属性（computed）和监听属性（watch）。计算属性会在依赖的data属性变化时自动计算并缓存结果，提高性能。而监听属性则在属性变化时触发回调函数，可用于控制DOM更新或执行复杂逻辑。通过设置deep，可以监听对象属性的深层变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、计算属性（computed）

当依赖的data对象中的属性值发生变化时、会触发计算方法，在data对象中生成新的变量，会将新的变量缓存起来；（只要依赖的data对象属性值不发生改变，将不会触发计算方法；）
可以用计算属性实现的，也可以用方法methods实现，但是methods性能不如computed；methods每次渲染后都会被调用，computed只要响应式依赖(data中的属性)没有发生改变，就不会重新计算，并且计算后会重新被缓存；

监听data中的 first 和 last 计算出 result，在data中不需要定义result

<template>
  <div id="app">
    <div>{
   {
   result}}</div>
  </div>
</template>

<script>

export default {
   
  data(){
   
    return{
    
      first:10,
      last: