vue的生命周期和计算属性

2024 年 8 月 8 日 15点热度 0人点赞 0条评论

生命周期

钩子函数

Vue中render函数和template的区别

生命周期

生命周期:对象从创建到销毁的过程
钩子函数:在某一特定的时刻,自动被触发的函数被钩子函数

钩子函数

new Vue({

el:
template:
render(){}
data:
methods:
beforeCreate(){}
created(){}
beforeMount(){}
mounted(){}
beforeUpdate(){}
updated(){}
beforeDestroy(){}
destroyed(){}
})

Vue中render函数和template的区别

在vue选项中:有el,template,render render>template>el

vue中一般使用template来创建HTML,有时也会使用JavaScript来创建HTML，这时就需要render函数
render函数中有一个参数叫h也就是creatElement,render函数将createElement的返回值放到HTML中
createElement有3个参数：
第一个参数（必写参数，类型是字符串，对象，函数）主要用于提供DOM的html内容
第二个参数（可选，类型是对象）主要用于设置这个DOM的一些样式。属性，传的组件的参数，绑定事件之类的
第三个参数（可选，类型是数组）主要是指改节点下还有其他节点

template和render函数的区别：
1）template适合简单的组件封装，render函数适合复杂的组件封装
2）template理解起来相对简单，但灵活性不高，性能低，而render灵活性较高，对使用者要求亦高
3）render函数渲染没有编译过程，相当于把代码直接给程序，所以容易出现错误，对使用者要求高
4）render函数较template优先级别高

 <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建dom元素 -->
    <div id="app">
        <input type="text" v-model="name">
        <div>{
   {name}}</div>
        <!-- <button>挂载</button> -->
    </div>
    <script>
        /**
         * 在vue选项中:有el,template  template优先级高于el
         * 在vue选项中:有el,template,render  render>template>el
        */
        let vm = new Vue({
            el:'#app',
            template:'<div>哈哈</div>',
            // 渲染模板
            // 系统自动注入参数createElement
            render(createElement){
              return  createElement('h2','生命周期')
            },
            data:{//属性
                name:'杨志远'
            },
            methods:{//方法

            },
            /**
             * 创建之前
             * 什么都是undefined
            */
            beforeCreate(){
                // 分组输出
                console.group('==beforeCreate==');
                console.log('el',this.$el);
                console.log('data',this.$data);
                console.log('name',this.name);
            },
            /**
             * 创建完成
             * 1.el还是undefined
             * 2.可以获取数据
             * 作用:发起异步请求
             * */ 
            created(){
                console.group('==created==');
                console.log('el',this.$el);
                console.log('data',this.$data);
                console.log('name',this.name);
            },
            /**
             * 挂载之前
             * 1.el找到挂载点,但是视图未更新
             * 2.可以获取数据
             * 作用:发起异步请求
            */
            beforeMount(){
                console.group('==beforeMount==');
                console.log('el',this.$el);
                console.log('data',this.$data);
                console.log('name',this.name);
            },
            /**
             * 挂载完成
             * 1.el找到挂载点,同时更新视图
             * 2.可以获取数据
             * 作用:发起异步请求,开启轮播图,定时器,延时器,订阅
            */
            mounted(){
                console.group('==mounted==');
                console.log('el',this.$el); 
                console.log('data',this.$data);
                console.log('name',this.name);
            },
            /**
             * 更新之前
             * 1.更新之前已经是最新数据,指的是视图再次更新之前
            */
            beforeUpdate(){
                console.group('beforeUpdate')
                console.log(this.name);
            },
            /**
             * 更新完成
             * 1.数据已经是最新数据,指的是视图再次更新完成
            */
            updated(){
                console.group('updated')
            },
            //销毁之前
            beforeDestroy(){
                console.log('beforeDestroy');
            },
            /**
             * 销毁完成
             * 作用:取消定时器,延时器,订阅
            */
            destroyed(){
                console.log('destroyed');
            }
        })
    

        // let oBtn = document.querySelector('button');
        // oBtn.onclick = function(){
        //     // console.log(vm);
        //     // 执行销毁操作
        //     vm.$mount('#app')
        // }
    </script>

vue的计算属性

* 1.方法名为自定义
* 2.在计算属性的方法中必须有return
* 3.计算属性的方法中返回值被其方法名所接受
* 4.计算属性中不能和data中的属性名相同
* 5.在vue中声明数据的方法:data,computed

1.使用计算属性可以处理一些复杂的特殊的业务逻辑
2.一行代码无法实现的操作使用计算属性

 <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建Dom元素 -->
    <div id="app">
        <div>name的值为:{
   {name}}</div>
        <div>将name的值进行翻转为:{
   {newName}}</div>
        <div>num的值为:{
   {num}}</div>
        <div>计算属性中的name值为:{
   {name}}</div>
        <h2>学员成绩表</h2>
        <table border="1" style="border-collapse: collapse;" width="500">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>分数</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in students" :key="item.id">
                    <td>{
   {item.id}}</td>
                    <td>{
   {item.name}}</td>
                    <td>{
   {item.score}}</td>
                </tr>
                <tr>
                    <td colspan="3">总成绩为:{
   {total}}</td>
                </tr>
                <tr>
                    <td colspan="3">平均分为:{
   {avg}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        // 3.实例化vue
        new  Vue({
            el:'#app',
            data:{//属性
                name:'王一博',
                students:[
                    {id:1,name:'杨志远',score:99},
                    {id:2,name:'王成玉',score:100},
                    {id:3,name:'陈子才',score:97},
                    {id:4,name:'朱小林',score:96},
                ]
            },
            methods:{//方法

            },
            /**
             * 计算属性
            */
            computed:{
                /**
                 * 1.方法名为自定义
                 * 2.在计算属性的方法中必须有return
                 * 3.计算属性的方法中返回值被其方法名所接受
                 * 4.计算属性中不能和data中的属性名相同
                 * 5.在vue中声明数据的方法:data,computed
                */
                newName(){
                    // 将字符串转为数组
                    let arr = this.name.split('');
                    // 数组的反转,有返回值,返回值为新数组
                    let newArr = arr.reverse();
                    // 将数组转为字符串 
                    let data = newArr.join('');
                    return data
                },
                num(){
                    return 666;
                },
                // name(){
                //     return '肖奈'
                // }
                total(){
                    let sum = 0;
                    this.students.forEach(item=>{
                        sum += item.score;
                    })
                    return sum;
                },
                avg(){
                   return this.total/this.students.length;
                }

            }
        })
    </script>

计算属性和methods的区别

methods和computed的区别:
* 不同点:
* 1.调用:computed中直接书写方法名,methods需要执行函数的调用
* 2.computed中有缓存功能,缓存数据依赖于data数据的改变,只有当data中数据发生改变时,computed中的方法会再次被调用;
* 3.methods中的方法,执行几次就调用几次
* 相同点:
* 1.执行的结果一致
* 实际应用:
* 1.在一些不需要事件的操作中,需要经过一系列复杂的操作的才能获取到结果的使用computed
* 2.在一些事件处理中使用methods

<!-- 2.创建Dom元素 -->
    <div id="app">
        <div>口红:{
   {goods}}</div>
        <input type="text" v-model="num">
        <div>methods中的总价为:{
   {priceNum()}}</div>
        <div>methods中的总价为:{
   {priceNum()}}</div>
        <div>methods中的总价为:{
   {priceNum()}}</div>
        <hr>
        <div>computed中的总价为:{
   {priceSum}}</div>
        <div>computed中的总价为:{
   {priceSum}}</div>
        <div>computed中的总价为:{
   {priceSum}}</div>
    </div>
    <script>
        // 3.实例化vue
        new  Vue({
            el:'#app',
            data:{//属性
                goods:'CL口红 萝卜丁口红3',
                price:959,
                num:999
            },
            methods:{//方法
                priceNum(){
                    console.log('methods');
                    return this.price*this.num
                }
            },
            /**
             * methods和computed的区别:
             *  不同点:
             *      1.调用:computed中直接书写方法名,methods需要执行函数的调用
             *      2.computed中有缓存功能,缓存数据依赖于data数据的改变,只有当data中数据发生改变时,computed中的方法会再次被调用;
             *      3.methods中的方法,执行几次就调用几次
             *  相同点:
             *       1.执行的结果一致
             *  实际应用:
             *      1.在一些不需要事件的操作中,需要经过一系列复杂的操作的才能获取到结果的使用computed
             *      2.在一些事件处理中使用methods
            */
            computed:{
                priceSum(){
                    console.log('computed');
                    return this.price*this.num
                }
            }
        })
    </script>

计算属性的get和set方法

computed计算属性中包含了set和get两个方法（回调函数）

get回调函数: 当需要读取当前属性值时调用,根据相关的数据计算并返回当前属性的值

set回调函数:监视当前属性值发生改变时调用,更新相关的属性值

 <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建Dom元素 -->
    <div id="app">
        <div>计算属性中title的值为:{
   {newTitle}}</div>
        <div>计算属性中pageTitle的值为:{
   {pageTitle}}</div>
    </div>
    <script>
        // 3.实例化vue
        let vm = new  Vue({
            el:'#app',
            data:{//属性
                title:'保护我方队友李佳琦',
                msg:'',
            },
            methods:{//方法

            },
            computed:{
                // 简写的形式
                newTitle(){
                    return '保护我方队友李佳琦'
                },
                // 原生形式
                pageTitle:{
                    // 在computed中获取数据
                    get(){
                        // return '哈哈'
                        return this.msg;
                    },
                    // 在computed中设置数据
                    set(title){
                        this.msg = title;
                    }
                }
            }

        })
        // 给pageTtitle设置数据
        vm.pageTitle = '薇娅偷税“社死”，李佳琦刚刚预告今晚6点正常直播'
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建Dom元素 -->
    <div id="app">
        <div>计算属性中title的值为:{
   {newTitle}}</div>
        <div>计算属性中pageTitle的值为:{
   {pageTitle}}</div>
    </div>
    <script>
        // 3.实例化vue
        let vm = new  Vue({
            el:'#app',
            data:{//属性
                title:'保护我方队友李佳琦',
                msg:'',
            },
            methods:{//方法

            },
            computed:{
                // 简写的形式
                newTitle(){
                    return '保护我方队友李佳琦'
                },
                // 原生形式
                pageTitle:{
                    // 在computed中获取数据
                    get(){
                        // return '哈哈'
                        return this.msg;
                    },
                    // 在computed中设置数据
                    set(title){
                        this.msg = title;
                    }
                }
            }

        })
        // 给pageTtitle设置数据
        vm.pageTitle = '薇娅偷税“社死”，李佳琦刚刚预告今晚6点正常直播'
</script>

购物车案例

 <!-- 1.引入vue -->
    <script src="./vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <!-- 2.创建Dom元素 -->
    <div id="app" class="container" v-cloak>
        <h2 class="text text-center text-success">购物车列表</h2>
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>
                        全选<input type="checkbox" v-model="checkedAll" @change="changeAll">
                    </th>
                    <th>商品名称</th>
                    <th>商品单价</th>
                    <th>商品数量</th>
                    <th>商品总价</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- 使用template标签,不会被浏览器所解析  -->
                <template v-if="carts.length >  0">
                    <tr v-for="(item,index) in carts" :key="item.id">
                        <td>
                            <input type="checkbox" v-model="item.checked" @change="changeOne">
                        </td>
                        <td>
                            {
   {item.goods}}
                            <img style="width:100px" :src="item.imgUrl" alt="">
                        </td>
                        <td>{
   {item.price}}</td>
                        <td>
                            <button @click="minus(index)" class="btn btn-info">--</button>
                            {
   {item.num}}
                            <button @click="add(index)" class="btn btn-info">++</button>
                        </td>
                        <td>{
   {item.num*item.price}}</td>
                        <td>
                            <button @click="del(index)" class="btn btn-danger">删除</button>
                        </td>
                    </tr>
                </template>
                <tr v-else>
                    <td colspan="6">购物车空空如也!!!</td>
                </tr>
            </tbody>
        </table>
        <div>
            合计:{
   {total}}
        </div>
        
    </div>
    <script>
        // 3.实例化vue
        new  Vue({
            el:'#app',
            data:{//属性
                checkedAll:false,//默认
                carts:[
                    {
                        id:1,
                        goods:'萝卜丁',
                        price:'959',
                        imgUrl:'https://img.alicdn.com/bao/uploaded/i1/2201196294013/O1CN01KYjrpO1fW085mXOXo_!!2201196294013.jpg',
                        num:1,
                        checked:false,//默认不选中
                    },
                    {
                        id:2,
                        goods:'眼影盘',
                        price:'2702.27',
                        imgUrl:'https://img.alicdn.com/bao/uploaded/i2/2209198403670/O1CN01NdimLp1cyuDkg84o0_!!2209198403670.jpg',
                        num:1,
                        checked:false,//默认不选中
                    },
                    {
                        id:3,
                        goods:'粉底液',
                        price:'3065.00',
                        imgUrl:'https://img.alicdn.com/bao/uploaded/i4/2201168176213/O1CN011MQx0c1vlbSdI1pRO_!!2201168176213.jpg',
                        num:1,
                        checked:false,//默认不选中
                    },
                    {
                        id:4,
                        goods:'鳄鱼皮包',
                        price:'39500.00',
                        imgUrl:'https://img.alicdn.com/bao/uploaded/i4/2094320074/TB23hKIsRsmBKNjSZFFXXcT9VXa_!!2094320074.jpg',
                        num:1,
                        checked:false,//默认不选中
                    },
                    {
                        id:5,
                        goods:'劳力士',
                        price:'1038.00',
                        imgUrl:'https://img.alicdn.com/bao/uploaded/i1/849723430/O1CN01WYgaNj1bCzDXImjpO_!!849723430.jpg',
                        num:1,
                        checked:false,//默认不选中
                    },
                    
                ]
            },
            methods:{//方法
                add(index){
                    // 根据库存及产品的需求来判断
                    this.carts[index].num++;
                },
                minus(index){
                    if(this.carts[index].num <= 1){
                        return;
                    }
                    this.carts[index].num--;
                },
                del(index){
                    this.carts.splice(index,1)
                },
                // 实现全选和反选
                changeAll(){
                    this.carts.forEach(item=>{
                        item.checked = this.checkedAll;
                    })
                },
                // 每一个复选框的操作
                changeOne(){
                    this.checkedAll = this.carts.every(item=>item.checked);
                    
                }
            },
            computed:{
                // 求合计
                total(){
                    let sum  = 0;
                    this.carts.forEach(item=>{
                        if(item.checked){
                            sum += item.price*item.num
                        }
                    })
                    return sum;
                }
            }
        })
    </script>