21-10-20--Vue学习记录第三天

Vue学习记录第三天

一、深浅监听

浅监听

Vue提供了watch选项，提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

new Vue({
    el:"#app",
    data:{
        num:5,
    },
    watch:{
        num(newV,oldV){
            console.log(newV);
            console.log(oldV);
        }
    }
})

深度监听

在vue中，如果要监听数组或对象的变化，是获取不到旧的值的，只能获取到新的值，因为vue在底层处理的时候就没有保存旧的值。如果要监听对象类型，一定要使用深度监听

new Vue({
    el:"#app",
    data:{
        obj:{
            name:"Tom",
            age:24
        }
    },
    watch:{
        obj:{
            deep:true,        // 开启深度监听
            handler(){        // 处理
                console.log("我发生变化了");
            }
        },
        // 深度监听无法获取到旧的值，如果我们想要获取旧的值，可以将深度监听改成简单数据类型进行监听。深度监听容易造成页面的卡顿，我们可以拆成简单数据类型进行监听。
        "obj.name"(newV,oldV){
            console.log("我发生变化了");
            console.log(newV,oldV);
        }
    }
})

二、jsonp

1、使用场景：jsonp用来解决跨域的，当出现跨域问题的时候我们可以使用jsonp来解决

2、原理：动态创建script标签

3、使用前提：①跨域 ②接口地址中一定有回调函数

4、jsonp和ajax的区别：jsonp支持跨域的，ajax不支持跨域的

// 1、创建script标签
var os = document.createElement("script")
// 2、给script标签设置src属性
os.src = "http://suggestion.baidu.com/su?cb=a&wd=" + val
// 3、将script标签插入到页面中
document.body.appendChild(os)
// 4、全局设置回调函数
function a(res){
    console.log(res)
}

三、生命周期

创建阶段（create）

创建阶段的生命周期函数是自动执行的

首先执行beforeCreate，然后执行created

beforeCreate 创建前

创建前，vue的变量还没有声明

created 创建后

创建后，vue的变量已经声明完成,通常用于项目的初始化

挂载阶段（mount）

beforeMount 挂载前

mounted 挂载后

挂载阶段的生命周期函数在创建阶段的生命周期函数执行完成自动执行，

beforeMount 还没有实现页面上变量数据的挂载

mounted 已经完成页面数据的挂载

更新阶段（update）

beforeUpdate 更新前

updated 更新后

更新阶段的生命周期函数在挂载阶段的生命周期函数执行完成后发生数据修改自动执行，

beforeUpdate 数据修改前执行

updated 数据修改后执行

更新阶段的生命周期函数每次跟新都执行，但是挂载阶段的生命周期函数和创建阶段的生命周期函数只在第一次加载执行一次

销毁阶段 （destroy）

beforeDestroy 销毁前

destroyed 销毁后

触发销毁函数后执行销毁阶段的生命周期函数，通常用来进行内存回收。

四、计算属性

computed：作为vue当中的计算属性，主要用在页面当中的数据计算，特点：

1、调用的时候不用加括号，灵活度不够好

2、本身具备缓存能力

3、计算属性不可以和其他的vue变量或者功能重名

4、计算属性的值可以读取，不可以修改

<div id="app">
        <div id="msg" @click="add">    
            {{ add() }}
            {{ add() }}
            {{ add() }}
            <hr />
            {{ add_1 }}
            {{ add_1 }}
            {{ add_1 }}
            <input v-model="add_2">
            {{ add_1 }}
        </div> 
    </div>
    
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                add_2: 123
            },
            methods:{
                add(){
                    console.log("add 被调用了,methods")
                    return 999
                }
            },
            computed:{
                add_1(){
                    console.log("add 被调用了,computed")
                    return "abc"
                }
            }
        })
    </script>