Vue计算属性，监听器，动画

最新推荐文章于 2022-10-21 00:29:17 发布

Recall_2001

最新推荐文章于 2022-10-21 00:29:17 发布

阅读量240

点赞数

文章标签：动画 html5 html

本文链接：https://blog.csdn.net/recall_2001/article/details/120649459

版权

一、计算属性

1、为什么需要计算属性？

表达式的计算逻辑可能会比较复杂，且在模板中放入太多的逻辑会让模板过重，并且难以维护。使用计算属性可以让模板更加简洁。

对比：

2、如何使用计算属性（computed）

基本语法

     computed: {
        reverseString: function(){
          return this.msg.split('').reverse().join('');
        }
      }
//reverseString自定义的属性名

注意：

必须用return将结果返回
需要加入this关键字，表明当前的msg应用
计算属性是基于data中的数据进行处理的。
在模板中直接输入computed中定义的属性名，不需要加（）调用。（示例如上图）

3、计算属性与方法的区别

结论：

computed 计算属性是基于它们的响应式依赖（所谓依赖就是基于data中的数据，改变数据，结果也会变化）进行缓存的，当多次调用 reverseString 的时候只要data里面的值不改变他会把第一次计算的结果直接返回，直到data 中的值改变，计算属性才会重新发生计算。
计算属性的优点：如果所需操作或计算的数据十分耗时或者计算量大，多次调用时，可以节省性能。
methods 不存在缓存问题，每次请求都会响应数据。

二、监听器Watch （实现数据的监听，当数据发生变化时，及时做出响应处理）。

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。

1、应用场景

数据变化时执行异步（异步就是在不刷新网页的情况下，就行请求和数据更新操作）或开销较大（开销较大一般指较耗时或者性能）的操作。

ps:与计算属性的主要区别就是：异步、开销较大

2、侦听器用法

用侦听器实现表单验证的效果

三、vue动画

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：

在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js

1、过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

总结：可以将过渡分为两种情况：1、动画开始和结束时的状态2、动画的中间状态和过渡过程

2、v-前缀的修改（对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。你也可以自己定义名字，即给<transition>内加入name属性 ）

3、使用第三方的CSS动画库

4、使用动画钩子函数（可以理解为动画的生命周期函数，有先后顺序）

购物车的小球钩子函数示

5、v-for渲染的列表，使用动画。（不能使用 transition 包裹，需要使用 transitionGroup包裹。）

    <style>
        li {
          border: 1px dashed #999;
          margin: 5px;
          line-height: 35px;
          padding-left: 5px;
          font-size: 12px;
          width: 70%;
        }
        li:hover {
          background-color: hotpink;
          transition: all 0.8s ease;
        }
        .v-enter,
        .v-leave-to {
          opacity: 0;
          transform: translateY(80px);
        }
        .v-enter-active,
        .v-leave-active {
          transition: all 0.6s ease;
        }
        /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果,记住就好 */
        .v-move {
          transition: all 0.6s ease;
        }
        .v-leave-active{
          position: absolute;
        }
      </style>
</head>
<body>
    <div id="app">
        <div>
          <label>
            Id:
            <input type="text" v-model="id">
          </label>
    
          <label>
            Name:
            <input type="text" v-model="name">
          </label>
    
          <input type="button" value="添加" @click="add">
        </div>
    <transition-group appear>
        <!-- appear是为了在页面刚开始加载时，有个渐入的动画效果 -->
        <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
          {{item.id}} --- {{item.name}}
        </li>
      </transition-group>
    <script>
        var vm = new Vue({
          el: '#app',
          data: {
            id: '',
            name: '',
            list: [
              { id: 1, name: '小明' },
              { id: 2, name: '小花' },
              { id: 3, name: '小李' },
              { id: 4, name: '小王' }
            ]
          },
          methods: {
            add() {
              this.list.push({ id: this.id, name: this.name })
              this.id = this.name = ''
            },
            del(i) {
              this.list.splice(i, 1)
            }
          }
        });
      </script>

Recall_2001

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue计算属性，监听器，动画

一、计算属性1、为什么需要计算属性？表达式的计算逻辑可能会比较复杂，且在模板中放入太多的逻辑会让模板过重，并且难以维护。使用计算属性可以让模板更加简洁。对比：2、如何使用计算属性（computed）基本语法 computed: { reverseString: function(){ return this.msg.split('').reverse().join(''); } }//...
复制链接

扫一扫