vue2

Vue的双向绑定原理(扩展)

1. Object.defineProperty

2. 观察者模式(发布-订阅模式)

计算属性

var vm = new Vue({
    el: "#app",
    data: {
        num1: 0,
        num2: 0
    },
    computed: {
        result(){
            return this.num1 + this.num2;
        },
        result: {
            get(){
                //在获取值的时候会被调用，获取到的值就是这个函数的返回值
                //上面的简写形式的函数其实就是这个get函数
            },
            set(value){
                //当使用计算属性做双向绑定的时候会用到（很少用），计算属性被赋值的时候
                //会调用这个方法，我们可以在这个方法中做一些对应的操作
            }
        }
    }
})

//methods和comupted的区别
//1. methods使用在这种场景下的时候，必须加上() 可以传递参数
//2. computed不需要加() computed不能传参
//3. methods中一般做的都是一些业务逻辑（发送ajax请求。。。）
//4. computed只是可以帮你返回一个值，把计算的逻辑封装起来

生命周期钩子函数

1. beforeCreate     在数据初始化之前调用
2. created          在数据初始化完成时调用，这是最早的可以访问到数据的钩子函数
3. beforeMount      在元素被创建并挂载页面之前调用
4. mounted          在元素被创建并挂载页面之后调用
5. beforeUpdate     在有数据变化，更新dom之前调用
6. updated          在有数据变化，更新dom之后调用
7. beforeDestroy    在vue对象被销毁之前调用
8. destroyed        在vue对象被销毁之后调用
//生命周期的大致过程
        //1. 调用 new Vue()创建一个Vue实例
        //2. 首先初始化生命周期
        //3. 初始化了数据
            // 我们自己写的数据是在data里面的，但是最终在页面中使用的数据，其实是vue实例中的数据，
            //在初始化数据的时候，vue将data中所有的数据，通过Object.defineProperty方法全部挂载到了Vue实例上，我们才可以在页面中使用这些数据
        //4. 判断在创建对象的时候，传递进去参数中是否有el参数，如果有，就继续判断是否，有template参数，如果没有
        //5. 把我们在el中指定的元素，作为模板
        //6. 使用上一步创建出来的模板，将数据渲染进去，产生真实的DOM元素，这个DOM对象其实就是 vm.$el,  将创建出来的DOM对象，替换回el参数对应的元素所在的位置
        //7. 此时页面已经展示完毕，进入一个循环阶段
            //在这个循环阶段中，Vue会不间断的监视数据的变化，如果有数据发生变化，则创建虚拟DOM，在虚拟DOM应用数据的变换，将虚拟DOM和页面中的DOM树进行对比，找出差异之后，将有差异的部分进行更新
        //8. 如果有人调用vm.$destroy方法，这个Vue实例将会被销毁
        //9. 在销毁的过程中，会释放所有的资源，比如：监视器、事件、子组件。。
        //10. Vue实例被销毁！

ajax

1. vue-resource

this.$http.get(url).then(res=>{}, err=>{})
this.$http.post(url, 数据是一个对象, {emulateJSON: true}).then(res=>{}, err=>{})

2. axios

axios.interceptors.request.use(config => {
    //自己的加工逻辑全部可以在这里进行
    //请求会先经过这里，被拦截下来，这个函数执行完毕之后，才会发送出去
    //我们可以在这里对请求中的任意内容进行更改，比如 请求头，比如请求数据

    // config.headers
    // config.data

    return config;
})

axios({
    url: "",
    method: "",
    data: 默认支持字符串，如果要使用对象，则需要自己添加拦截器
}).then(res => {}, err => {

})