Vue学习笔记

预备全栈工程师的小白

已于 2022-07-02 12:10:55 修改

阅读量159

点赞数

文章标签：学习 vue javascript 前端

于 2022-06-20 17:07:43 首次发布

本文链接：https://blog.youkuaiyun.com/zsd_fresh/article/details/125375606

版权

本文详细介绍了Vue.js中的计算属性和监听属性。计算属性用于根据现有数据计算新值，具备缓存机制，提高效率。示例中展示了计算属性在全名组合和列表排序中的应用。监听属性则允许在属性变化时执行特定操作，支持异步任务。同时，文章还提及了Vue的数据代理原理和数据监测机制，强调了Vue中v-if和v-show的使用场景和区别。

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

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili

计算属性

以下为计算属性代码的完整写法与简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue学习</title>
    <!--引入vue-->
    <script src="./js/vue.js"></script>
    <style>
        *{
            margin:20px;
        }
    </style>
</head>
<body>

<div id="root">
    <h1>标题</h1>
    姓：<input type="text" v-model="firstname"><br/>
    名：<input type="text" v-model="lastname"><br/>
    全名：<span>{{fullname}}</span>
</div>
<script>
    Vue.config.productionTip = false//阻止vue在启动是生产提示
    var vm  = new Vue({
        el:"#root",
        data:{
            firstname:"张",
            lastname:"三"
        },
        computed:{
            //计算属性完整写法
            /*fullname:{
            //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
            //get什么时候调用？1.初次读取fullName时。2.所以依赖的数据发生变化时。
                get(){
                    return this.firstname+'-'+this.lastname
                },
                //set什么时候调用？当fullName被修改时。
                set(value){
                    var arr = value.split('-')
                    this.firstname=arr[0]
                    this.lastname=arr[1]
                }
            }*/
            //简写
            /*fullname:function(){
                return this.firstname+'-'+this.lastname;
            }*/
            fullname(){
                return this.firstname+'-'+this.lastname;
            }
        }
    })
</script>

</body>
</html>

1.定义：要用的属性不存在，要通过已有属性计算得来。

2.原理：底层借助了Object.defineproperty方法（数据代理）提供的getter和setter。

3.get函数什么时候执行？

初次读取时会执行一次。
当依赖的数据发生改变时会被再次调用

4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

5.备注：

计算属性最终会出现在vm上，直接读取使用即可。
如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化

计算属性联系案例（列表排序）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue学习</title>
    <!--引入vue-->
    <script src="./js/vue.js"></script>

</head>
<body>

<div id="root">
    <input type="text" placeholder="请输入名字" v-model="keyword">
    <button @click="sortType=1">年龄升序</button>
    <button @click="sortType=2">年龄降序</button>
    <button @click="sortType=0">原顺序</button>
    <ul>
        <li v-for="p in filpersons" :key="p.id">
            {{p.name}}--{{p.age}}--{{p.sex}}
        </li>
    </ul>
</div>
<script>
    Vue.config.productionTip = false//阻止vue在启动是生产提示
    var vm  = new Vue({
        el:"#root",
        data:{
            keyword:"",
            sortType:0,//0原顺序，1降序，2升序
            persons:[
                {id:'001',name:"张无忌",age:14,sex:"男"},
                {id:'002',name:"张三丰",age:23,sex:"男"},
                {id:'003',name:"张翠兰",age:21,sex:"女"},
                {id:'004',name:"刘倩倩",age:24,sex:"女"},
            ]
        },
        computed:{
            filpersons:{
                get(){
                    //过滤后的列表
                    var arr = this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyword)!=-1
                    })
                    if(this.sortType){
                        //sort的箭头函数中的p1和p2表示列表中前一个元素和后一个元素
                        arr.sort((p1,p2)=>{
                            return this.sortType===1 ? p1.age-p2.age:p2.age-p1.age
                        })
                    }
                    return arr
                }
            }
        }

    })
</script>

</body>
</html>

监听属性

监听属性的完整写法：

var vm  = new Vue({
        el:"#root",
        data:{
            n:0
        },
        watch:{
            n:{
                immediate:true,//初始化时让handler调用一下
                //handler什么时候调用？当n（被监视的属性）发生改变时
                handler(newValue,oldValue){
                    console.log("n被修改了",newValue,oldValue)
                }
            }
        }

计算属性和监听属性

computed和watcn之间的区别：

computed能完成的功能，watch都可以完成。
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则：

所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
所有不被Vue所管理的函数（定时器的回调、ajax的回调函数等，promise的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象。

条件渲染

1.v-if

写法：

（1）v-if=”表达式“

（2）v-else-if=”表达式“

（3）v-else=”表达式“

适用于：切换频率较低的场景。

特点：不展示的DOM元素直接被移除。

注意：v-if可以和：v-else-if、v-else一起使用，但要求结构不能被”打断“。

2.v-show

写法：v-show=”表达时“

适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

备注：使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到。

数据代理

首先上一个简单的数据的代理案例，使用Object.defineProperty方法实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据代理</title>
</head>
<body>
<!--数据代理:通过一个对象代理另一个对象中属性的操作(读/写)-->
<script>
    let obj1 = {x:100}
    let obj2 = {y:200}
    //obj2为要操作的对象,'x'为给对象添加的属性
    Object.defineProperty(obj2,'x',{
        get(){
            return obj1.x;
        },
        set(val){
            obj.x = val;
        }
    })
</script>

</body>
</html>

Vue数据监测原理

监测对象：使用set方法监测

监测数组：使用下图所示可以改变数组值的方法监测

总结：

1.vue会监视data中所有层次的数据。

2.如何监测对象中的数据？

通过setter实现监视，且要再new Vue 时就传入要监视的数据。

（1）对象中后追加的属性，Vue默认不做响应式处理

（2）如需给后添加的属性做响应式处理，请使用以下API：

Vue.set(target,propertyName/index,value)
//或者使用以下函数
Vue.$set(target,propertyName/index,value)

3.如何监测数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：

（1）调用原生对应的方法对数组进行更新。

（2）重新解析模板，进而更新页面

4.在Vue修改数组中的某个元素一定要用如下方法：

使用这些API：push() 、pop()、shift()、unshift()、sort()、reverse()
Vue.set()或vm.$set()

特别注意：Vue.set()和vm.$set()不能给vm 或vm的根数据对象添加属性！！