2021-10-23

MVVM模型

1.M 模型Model：对应data中的数据

2.V 视图View： 模板

3.VM：视图模型ViewModel：Vue实例对象

数据代理

使用Object.defineProperty方法添加key-value

console中添加的元素颜色比较浅，这标志着这个值是不可枚举的（不可遍历的）

想让遍历则添加enumerable：true

但此时是无法在console上更改的添加writable:true

但此时是无法删除的configurable:true

getter函数/setter函数

// 当有人读取person的age属性时，get函数(getter)就会被调用，返回值就是age的值

    get:function(){

        return number

    },

     

     // 当有人读取person的age属性时，set函数(setter)就会被调用，返回值就是age的值

    set(value){

     console.log("修改了age属性值为",value)

     number = value

    }

图中data是配置对象

数据代理流程（使编码更加方便）

事件处理

            1.使用v-on：xxx或@xxx绑定事件

            2.事件的回调需要配置在methods对象中，最终会在vm上

            3.methods中配置的函数，不要用箭头函数=>，否则this就不是vm了

            4.methods中配置的函数，都是被vue所管理的函数，this的指向是vm或组件实例对象

            5.@click="demo"和@click=”demo($event)"效果一致，但后者可以传参

事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。）

修饰符主要前三个

修饰符可以连着写.XX.XX

        prevent:阻止默认事件

        stop:阻止冒泡

        once:只触发一次

        capture:捕获事件

        self:有event.target是当前操作的元素是才触发事件

        passive:事件的默认行为立即执行，无需等待事件回调执行完毕

键盘事件

.Vue中常用的按键别名

        回车： enter

        删除： delete

        退出： esc

        空格： space

        换行： tab(特殊，必须配合keydown使用)，ctrl，alt，shift，windows

        上： up

        下： down

        左： left

        右： right

        2.ctrl，alt，shift，windows配合keyup时结合ctrl+c，@keyup.ctrl.y="调用函数"

计算属性(computed)：Vue中将属性和计算属性分开的，计算属性需要全新的配置

计算属性：

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

        2.原理：底层借助了object.defindproperty方法提供getter和setter

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

            1、初次读取时执行，2、所依赖的数据发生变化时执行

        4.优势： 与methods实现相比，内部由缓存机制，效率更高，调试更方便

        5.补充：

            1.计算属性最终都会出现在vm上，直接读取即可（this）

            2.如果计算属性被修改，那必须与set函数去响应修改，且set中要引起计算时依赖的数据发生改变

监视属性（watch)

1.当被监视的属性变化时，回调函数自动调用，进行相关操作

        2.监视函数的属性必须存在，才能进行监视

        3.监视的两种写法：

            （1）new Vue时传入watch配置

            （2）通过vm.$watch监视

深度监视：

        （1）Vue中的wztch默认不监测对象内部值的改变（一层）

        （2）配置deep：true可以监视对象内部值改变（多层）

    备注：

        （1）Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！

        （2）使用watch时根据数据的具体结构，决定是否采用深度监视

计算和监听的区别：

1.computed能完成的功能，watch都可以完成

2.watch能完成的功能，computed不一定能完成，eg:watch可以进行异步操作。

备注：

1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象

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

数据绑定：

 1.class样式：

            写法：class="XXX"XXX可以试是字符串、独享、数组

            字符串写法适用于：类名不确定，要动态获取

            对象写法适用于：要绑定对多个样式，个数不确定，名字也不确定

            数组写法适用于：要绑定多个样式，个数确定，名字确定，但不确定用不用

        2.style样式：

        style="{finSize:XXX}"xxx是动态的

        style="[a,b]"其中，a，b是样式对象