Vue2(生命周期,列表排序,计算属性和监听器)

这篇具有很好参考价值的文章主要介绍了Vue2(生命周期,列表排序,计算属性和监听器)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

上一章博客我们讲解了Vue基础
这一章我们来讲Vue生命周期,列表过滤,计算属性和监听器

一,生命周期

  • 通常也叫生命周期回调函数、生命周期函数、生命周期钩子
  • vue初始化时在不同的阶段调用的不同函数
  • 生命周期函数的this指向为vue实例,名字不能更改
1.1,生命周期函数简介

“生命周期”指实例对象从构造函数开始执行(被创建)到被GC(Garbage Collection)回收销毁的整个存在的时期
生命周期函数是为了在实例对象的各个阶段方便开发者控制而产生,在不同的时期有不同的生命周期函数,可以利用不同时期的生命周期函数去完成不同的操作

实际的开发过程中,生命周期函数的使用较为频繁,需要重点掌

1.2,Vue的初始化流程

Vue2(生命周期,列表排序,计算属性和监听器),vue.js,前端,javascript

  • beforeCreate阶段
    • vue中data的数据和methods的方法还不能使用
  • created阶段
    • vue中data的数据和methods的方法已可以使用
  • beforeMount阶段
    • 页面可以展示内容,但是是未编译,最终都是不能操作的DOM结构,展示时间短
  • mounted
    • 页面显示编译后的DOM
    • vue的初始化过程结束
    • 此阶段可进行:定时器、网络请求、订阅消息、绑定事件等
1.3,Vue的更新流程

Vue2(生命周期,列表排序,计算属性和监听器),vue.js,前端,javascript

  • beforeUpdate
    • 数据是新的,页面还没有更新
  • Updated
    • 数据是新的,页面同步更新
1.4, Vue的销毁流程

Vue2(生命周期,列表排序,计算属性和监听器),vue.js,前端,javascript

  • beforeDestroy
    • 此阶段可关闭定时器和取消订阅
    • 数据、方法可以访问但是不触发更新
  • destroy
    • 一切都结束了
1.5, 回顾生命周期
  • 生命周期函数
    • 创建前、创建后(beforeCreate、created)
    • 挂载前、挂载后(beforeMount、mounted)
    • 更新前、更新后(beforeUpdate、updated)
    • 销毁前、销毁后(beforeDestroy、destroyed)
  • 常用的生命周期函数
    • mounted
      • 开启定时器
      • 发送ajax请求
      • 订阅消息
      • 绑定自定义事件
    • beforeDestroy
      • 清除定时器
      • 取消订阅、事件监听
      • 解绑自定义事件
  • vue实例销毁
    • vue开发者工具的数据为空
    • 销毁后自定义事件失效
    • 不要在beforeDestroy进行数据的操作,不会再走更新流程
1.,6,代码演示
1.6-1,beforeCreate
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{myName}}
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data(){
            return{
                myName:"abc"
            }
        },
        beforeCreate(){
            var bobyDom = document.getElementsByTagName("body")[0].innerHTML
            // beforeCreate中,data的数据是没有被定义的
            console.log("beforeCreate",this.myName,bobyDom);
        },
    })
</script>
</html>

Vue2(生命周期,列表排序,计算属性和监听器),vue.js,前端,javascript

1.6-2,created
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{myName}}
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data(){
            return{
                myName:"abc"
            }
        },
        created(){
            var bobyDom = document.getElementsByTagName("body")[0].innerHTML
            // 做一下页面的数据初始化工作。比如说发起ajax请求
            console.log("created",this.myName,bobyDom);
        },
    })
</script>
</html>

Vue2(生命周期,列表排序,计算属性和监听器),vue.js,前端,javascript

1.6-3,beforeMount
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{myName}}
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data(){
            return{
                myName:"abc"
            }
        },
        beforeMount(){
            var bobyDom = document.getElementsByTagName("body")[0].innerHTML
            
            console.log("beforeMount",this.myName,bobyDom);
        },
    })
</script>
</html>

Vue2(生命周期,列表排序,计算属性和监听器),vue.js,前端,javascript

1.6-4,mounted
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{myName}}
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data(){
            return{
                myName:"abc"
            }
        },
        mounted(){
            var bobyDom = document.getElementsByTagName("body")[0].innerHTML
            // 数据已经渲染到View中
            console.log("mounted",this.myName,bobyDom);
        },
    })
</script>
</html>

Vue2(生命周期,列表排序,计算属性和监听器),vue.js,前端,javascript

1.6-5,beforeUpdate
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{myName}}
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data(){
            return{
                myName:"abc"
            }
        },
        beforeUpdate(){
            var bobyDom = document.getElementsByTagName("body")[0].innerHTML
            // 数据更新前,数据未改变
            console.log("beforeUpdate",this.myName,bobyDom);
        },
    })
</script>
</html>

Vue2(生命周期,列表排序,计算属性和监听器),vue.js,前端,javascript

1.6-6,updated
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{myName}}
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data(){
            return{
                myName:"abc"
            }
        },
        updated(){
            var bobyDom = document.getElementsByTagName("body")[0].innerHTML
            // 数据更新后,数据已改变
            console.log("updated",this.myName,bobyDom);
        }
    })
</script>
</html>

Vue2(生命周期,列表排序,计算属性和监听器),vue.js,前端,javascript

1.7,生命周期函数的使用场景
  • 在beforeCreate生命周期函数运行时,可以添加loading动画
  • 在created生命周期函数运行时,可以结束loading动画,还可以做一些初始化,实现函数自执行等操作
  • 最经常使用的是mounted生命周期函数
    • 可以发起后端数据请求,取回数据
    • 可以接收页面之间传递的参数
    • 可以子组件向父组件传递参数等

二,vue中列表排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <input type="text" v-model="searchInput" name="" id="">
            <button @click="paixu(1)">升序</button>
            <button @click="paixu(2)">降序</button>
            <button @click="paixu(3)">原序列</button>
            <div v-for="(item,index) in searchList">
                {{item.name}}--{{item.price}}
            </div>
        </div>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data(){
            return{
                keyword:0, // 用来排序
                searchInput:"",
                goodList:[
                    {name:'牛仔裤',price:200},
                    {name:'运动鞋',price:100},
                    {name:'跑步鞋',price:300},
                    {name:'篮球鞋',price:400},
                ],
            }
        },
        methods:{
            paixu(val){
                this.keyword=val
            }
        },
        computed:{
            searchList(){
                // 把goodList的内容过滤,把符合条件的形成一个新的数组
                // filter是数字的过滤方法,这个方法的参数是一个函数,此函数返回true,则把此项返回新的数组中
                let list = this.goodList.filter((item)=>{
                    return item.name.indexOf(this.searchInput)!==-1
                })

                if(this.keyword){
                    list.sort((a1,a2)=>{
                        return this.keyword === 1
                        ? a1.price - a2.price
                        : a2.price - a1.price
                    })
                }

                return list
            }
        }
    })
</script>
</html>

Vue2(生命周期,列表排序,计算属性和监听器),vue.js,前端,javascript

2.1,vue中数据更新的问题
2.1-1,对象新增数据更新问题
  • 描述
    • 通过普通对象添加属性方法,Vue不能监测到且不是响应式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-for="(attr,key) in person">
            {{key}} -- {{attr}}
        </div>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data(){
            return{
                person:{
                    name:'张三',
                    sex:'男',
                }
            }
        },
    
    })
</script>
</html>

Vue2(生命周期,列表排序,计算属性和监听器),vue.js,前端,javascript
这样添加它没有没有跟对象一样封装有监测数据变化的getter、setter

  • 解决
    • Vue.set() / this.$set
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-for="(attr,key) in person">
            {{key}} -- {{attr}}
        </div>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data(){
            return{
                person:{
                    name:'张三',
                    sex:'男',
                }
            }
        },
    
    })
</script>
</html>

Vue2(生命周期,列表排序,计算属性和监听器),vue.js,前端,javascript

  • 注意
    • this.$set不能给vue实例的根数据对象添加属性
2.1-1,数组数据更新问题
  • 描述
    • 直接通过数组索引值改变数组的数据,Vue监测不到改变
    • 实际在 js 内存已经把数据的第一项数据修改了
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-for="(attr,key) in person">
            {{key}} -- {{attr}}
        </div>
        <div>
            <input type="text" v-model="searchInput" name="" id="">
            <button @click="paixu(1)">升序</button>
            <button @click="paixu(2)">降序</button>
            <button @click="paixu(3)">原序列</button>
            <div v-for="(item,index) in searchList">
                {{item.name}}--{{item.price}}
            </div>
        </div>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data(){
            return{
                keyword:0, // 用来排序
                searchInput:"",
                goodList:[
                    {name:'牛仔裤',price:200},
                    {name:'运动鞋',price:100},
                    {name:'跑步鞋',price:300},
                    {name:'篮球鞋',price:400},
                ],
                person:{
                    name:'张三',
                    sex:'男',
                }
            }
        },
        methods:{
            paixu(val){
                this.keyword=val
            }
        },
        computed:{
            searchList(){
                // 把goodList的内容过滤,把符合条件的形成一个新的数组
                // filter是数字的过滤方法,这个方法的参数是一个函数,此函数返回true,则把此项返回新的数组中
                let list = this.goodList.filter((item)=>{
                    return item.name.indexOf(this.searchInput)!==-1
                })

                if(this.keyword){
                    list.sort((a1,a2)=>{
                        return this.keyword === 1
                        ? a1.price - a2.price
                        : a2.price - a1.price
                    })
                }

                return list
            }
        }
    })
</script>
</html>

Vue2(生命周期,列表排序,计算属性和监听器),vue.js,前端,javascript

  • 原因
    • 因为在vue中数组并没有跟对象一样封装有监测数据变化的getter、setter
  • 解决
    • Vue在数组的原始操作方法上包裹了重新解析模板的方法,也就是说我们在data里面的数组操作方法不是原生的,是vue封装过的
    • 哪些数组操作方法经过了封装?
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
pop() 删除数组的最后一个元素并返回删除的元素
shift()  删除并返回数组的第一个元素
unshift()  向数组的开头添加一个或更多元素,并返回新的长度。
splice()  从数组中添加或删除元素。
sort()   对数组的元素进行排序
reverse() 反转数组的元素顺序。

三,计算属性computed

计算属性,方法名可以直接在对象中使用.这个属性是通过计算得出的。
这个方法中的任意属性改变,都会触发这个方法
使用场景:希望把一些计算的业务逻辑放在方法中,例如:全名计算、地址计算、购物车合计

下面的示例,我们使用了三种方式:

  • 使用方法实现
  • 使用vue的computed读写方式实现
  • 使用vue的computed只读方式实现

注意:推荐使用computed的方式。有缓存机制。在页面重复调用多次的情况下,只执行一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <input type="text" v-model="firstName" ><br>
            <input type="text" v-model="lastName" ><br>
            <input type="text" v-model="getFullName()" ><br>
            <input type="text" v-model="fullNameReadOnly" ><br>
            <input type="text" v-model="funName" ><br>
        </div>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data(){
            return{
                firstName:'科比',
                lastName:'布莱恩特',
            }
        },
        methods:{
            getFullName(){
                return this.firstName + "-" + this.lastName
            }
        },
        computed:{
            // 只读方式的简写
            fullNameReadOnly(){
                return this.firstName + "-" + this.lastName
            },
            funName:{
                get(){
                    return this.firstName + "-" + this.lastName
                },
                set(value){
                    this.firstName = value.split("-")[0]
                    this.lastName = value.split("-")[1]
                }
            }
        },
    })
</script>
</html>

Vue2(生命周期,列表排序,计算属性和监听器),vue.js,前端,javascript

四,监视属性watch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data(){
            return{
                isSunny:true,
                person:{
                    age:18,
                    name:'王导',
                }
            }
        },
        watch:{
            // 表示要对isSunny这个属性进行监听
            isSunny(newVal,oldVal){
                console.log("改变了",oldVal,newVal);
            },

            // 深度监听可以用来监听整个对象的改变,但要慎重使用,因为消耗性能 
            person:{
                deep:true,
                handler(oldVal,newVal){
                    console.log("改变了",oldVal,newVal);
                }
            },
            "person.name"(oldVal,newVal){
                    console.log("我也监听了");
            }
        }
    })
</script>
</html>

Vue2(生命周期,列表排序,计算属性和监听器),vue.js,前端,javascript文章来源地址https://www.toymoban.com/news/detail-635294.html

最后

送大家一句话: 世界上的好东西都是抢来的,只有弱者才会坐等分配

到了这里,关于Vue2(生命周期,列表排序,计算属性和监听器)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue入门三(表单控制|购物车案例|v-model进阶|与后端交互|计算属性|监听属性|Vue生命周期)

    v-model双向数据绑定,还可以对输入框数据进行一定的限定。 v-modle 释义 lazy 等待input框的数据绑定时区焦点之后再变化 number 以数字开头并只保留后面的数字,不保留字母;字母开头都保留 trim 去除首位的空格 与后端交互统一使用json编码格式 与后端交互涉及到跨域问题后,

    2024年01月21日
    浏览(52)
  • Vue2的生命周期(详解)

    Vue实例的生命周期: 从创建到销毁的整个过程 Vue框架内置函数,随着组件的生命周期阶段,自动执行 作用:特定的时间点,执行特定的操作 分类:四大阶段 八大方法 new Vue() – Vue实例化(组件也是一个小的Vue实例) Init Events Lifecycle – 初始化事件和生命周期函数 beforeCreate – 生命周期

    2024年02月03日
    浏览(68)
  • Vue2基础四、生命周期

    1、生命周期 Vue生命周期:一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个阶段:① 创建 ② 挂载 ③ 更新 ④ 销毁 创建阶段:创建响应式数据 挂载阶段:渲染模板 更新阶段:修改数据,更新视图 销毁阶段:销毁Vue实例 2、生命周期钩子 Vue生命周期过程中,会 自动运

    2024年02月15日
    浏览(79)
  • 【vue2】vue生命周期的理解

    🥳博       主: 初映CY的前说(前端领域) 🌞个人信条: 想要变成得到,中间还有做到! 🤘 本文核心 :vue生命周期的介绍、vue生命周期钩子函数详解,vue生命周期的执行顺序 目录 一、生命周期介绍 二、生命周期的构成 1. 生命周期的四个阶段 : 2.八大钩子作用: 1.bef

    2024年02月02日
    浏览(73)
  • 计算属性和监听属性,生命周期钩子,组件介绍

    # 计算属性是基于它们的依赖进行缓存的 # 计算属性只有在它的相关依赖发生改变时才会重新求值 # 计算属性就像Python中的property,可以把方法/函数伪装成属性 # 计算属性必须要有返回值 基本使用 首字母变大写 通过计算属性,重写过滤案例 只要属性发生变化,就会执行 函数

    2024年01月21日
    浏览(43)
  • Vue3:计算属性、监听器

    计算属性是指 基于现有状态派生 (演变) 出新的状态,现有状态发生变化,派生状态重新计算。 computed 接收回调函数作为参数,基于回调函数中使用的响应式数据进行计算属性的创建,回调函数的返回值就是基于现有状态演变出的新状态。 完整写法 案例:动态显示名字。

    2024年02月09日
    浏览(90)
  • vue2面试题:对vue生命周期的理解

    生命周期(life cycle)的概念应用很广泛,在政治、经济、环境、技术、社会等诸多领域都会经常出现,可通俗理解为“从摇篮到坟墓”的整个过程,在vue中从实例的创建到销毁过程就是生命周期,即从创建、初始化数据、编译模板、挂载Dom–渲染、更新–渲染、卸载等一系列

    2024年01月25日
    浏览(53)
  • vue2 生命周期,工程化开发入门

    1.生命周期 生命周期介绍 生命周期的四个阶段 生命周期钩子 声明周期案例 2.工程化开发入门 工程化开发和脚手架 项目运行流程 组件化 组件注册 思考:什么时候可以发送初始化渲染请求?(越早越好)什么时候可以开始操作dom?(至少dom得渲染出来) Vue生命周期:就是一

    2024年02月11日
    浏览(62)
  • vue2的生命周期详解(代码演示+源码)

            生命周期是指从开始创建、初始化数据、编译模版、挂载 Dom - 渲染、更新 - 渲染、卸载等一系列过程,我们称这是 Vue 的生命周期,它主要强调一个时间段。用一句话来概括就是: Vue实例的生命周期: 从创建到销毁的整个过程 Vue框架内置函数,随着组件的生命周期阶

    2024年02月04日
    浏览(49)
  • Vue2 的@hook 、 hook: 与生命周期

    优点:简单易上手 缺点:此种方法子组件必须是自己编写的组件,若引用第三方库这种方式则不可行 官方文档并没有太多相关解释,只在处理边界情况 #程序化的事件侦听器— Vue.js (vuejs.org)里有出现。 子组件无需相关处理就能实现侦听,这块的实现原理可以从源码里探究部

    2024年02月05日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包