笔记--回调函数、计算属性、vm监听、深度监听

复习

1：回调函数的3个问题

什么时候执行回调，作用是什么，this指向什么

2：vm监视data中数据的特点

1：vue会监视data中所有层次的属性 set方法监视

2：对象中的属性数据通过添加set方法来实现监视

3：数组中的元素也实现了监视：重写数组一系列更新元素方法

   1）调用原生对应的方法对元素进行处理

   2）去更新界面    

（Vue文档数组变化检测中，Vue将观察数据的变化数组方法包裹起来---（Vue重写了数组的方法）以便在调用这些方法时，能够触发视图更新。）

push() pop()删除最后的元素  shift()添加第一位 unshift()删除第一位 splice()删改 sort()排序 reverse()翻转倒序

3：Vue.js是什么

Object.defineProperty() 原生js就自带的方法

vue也是js 他就是一个封装了js的库而已

Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性。

vue原理

Object.defineProperty(对象，属性名，{get,set等配置})

data.name="李四" 设置值 就会触发set

vue原理

vue通过原生js的Object.defineProperty监听到了 我们写的data数据

这个data里面的数据 有修改 就会触发 Object.defineProperty 里面的set

在set里面 我们可以获取到最新的修改的值 去页面上 正则匹配到对应地方 替换修改

 

1）作用：动态构建用户界面

2）特点：

遵循MVVM模式

编码简介，体积小，运行效率高，移动、PC端开发

他本身只关注UI，可以轻松引入vue插件和其他第三方库开发项目

3）与其他框架的关联

借鉴angular的模板和数据绑定技术

借鉴react的组件化和虚拟DOM技术

4)vue包含一系列扩展插件

vue-cli:vue脚手架

vue-resource(axios)：ajax请求

vue-router:路由

vuex:状态管理

vue-lazyload:图片懒加载

vue-scroller:页面滑动相关

mint-ui:基于vue的组件库（移动端）

element-ui:基于vue的组件库（PC端）

4）Vue对象的选项

1--el:

指定dom标签容器的选择器

Vue就会管理对应的标签及子标签

也可以通过$mount()来处理

2--data:

对象或函数类型

指定初始状态属性数据的对象

vm也会自动拥有data中所有属性 （data中定义m,则vm中有m，有get，set属性，调用this.m时，调用的是get属性，赋值时调用set方法，保存到data中，这称为数据代理）

页面中可以直接访问使用

数据代理： 由vm对象来代理对data中所有属性的操作（读、写）

data数据监视的特点：

1：vue会监视data中所有层次的属性

2：对象中的属性数据通过添加set方法来实现监视

3：数组中的元素也实现了监视：重写数组一系列更新元素的方法

1）调用原生对应的方法对元素进行处理

2）去更新界面

3--methods

包含多个方法的对象

供页面中的事件指令来绑定回调

回调函数默认有event参数，但也可以指定自己的参数

所有的方法由vue对象来调用，访问data中的属性且直接使用this.xxx

4--computed

包含多个计算属性的对象

计算属性可能为函数，也可能为对象（包含get和set方法）

根据已有属性进行计算返回一个新的数据，供页面获取显示

如果同时还需要监视计算属性的变化，需要使用getter/setter

计算属性有缓存，内部使用对象容器缓存(对象容器的值存的是计算属性值，名字是计算属性名)，可以减少计算的次数

如何给对象定义get/set属性

--对象创建之后指定：

Object.defineProperty(obj,age, //不支持ie8
{
    get(){},
    set(value){}
})

在创建对象时指定：get name(){return xxx } /set name(value){}   //给name设定get set方法。

5--watch

包含多个属性监视的对象

分为 一般监视和深度监视

watch:{

    'xxx.yyy': function(newValue,oldValue){
        //深度监听建议不要简写
    
    },
    'xxx':{
        deep: true, //xxx变了知道，xxx.yyy变了也知道  变了之后触发hander
        handler: (value) {
            
        }
    },
    
    name(newValue,oldValue){

        
    }
}
//另一种添加监视方法
vm.$watch('xxx',funn)