vue 笔记03

目录

01 vue 对象本身的属性和方法

02 computed计算属性的使用

03 filter过滤器的使用

04 使用key属性管理重复元素(虚拟dom原理)

05 MVC 和 MVVM

06 双向数据绑定原理

---

 

01 vue 对象本身的属性和方法

        vue构造函数传入的是options对象

        可以通过vue对象的$option获取 vm.$option

        可以通过vue对象$el获取到el属性指向的元素

        可以通过vue对象$data获取到data对象

        总结:

                el data其实并不是vm对象的属性    而是参数传递进去的那个options对象的属性

                但是我们平时直接vm.msg 就可以调用data里面的变量了 是因为vue底层帮我们做好了 方便我们调用

02 computed计算属性的使用

        data里面定义的数据无法直接互相访问  因为加载到data的时候还没有产生当前的vue对象

        如果我们需要一个变量 这个变量的值是根据data里面某个值或者某几个值的变化而变化的时候,那么我们就需要用到vue里面的computed计算属性

        用法:

                简单写法:

                computed:{

                        计算属性变量名(){

                                这里面可以通过this访问到data里面的任意数据

                                return 返回的结果就是当前计算属性的值

                          }

                    }

                一旦计算属性引用的其中任意一个变量的值发生变化了

               那么当前计算属性对应的函数就会执行 重新计算属性的值重新渲染

                updated生命周期函数  (钩子函数)

                这种需求为什么不使用updated钩子函数

                因为updated钩子函数是 只要data里面任意一个变量值发生变化都会触发 范围太大

                computed是页面加载时就会执行一次 就算初始结果

                计算属性本身不能直接修改值 需要定义存值器和取值器

                        高级写法：

                                computed:{//里面可以定义多个变量

                                    变量:{

                                        set(){

                                                设置当前变量的值

                                        },

                                        get(){

                                                    return 返回当前变量的值

                                        }

                                    }

                                }

                计算属性本身不能直接修改值 需要定义存值器和取值器

                第一种写法是简单写法

                我们需要使用高级写法才能实现修改计算属性值的需求

03 filter过滤器的使用

        针对页面mustache语法渲染的数据进行再次过滤可以使用过滤器

        用法:

                data同级的位置:

                        filters:{

                                过滤器名字(val){当前过滤器使用的内容

                                        return 返回过滤后的新内容

                                    }

                       }

                使用过滤器:

                        {{变量或者表达式 |  过滤器名字}}

                官方声明:

                        过滤器只能用在mustache语法 和 v-bind上面

                在vue中定义的过滤器是局部过滤器 

                还可以定义全局过滤器:

                        Vue.filter('过滤器的名字',回调函数)

                        回调函数的参数就是过滤原本的值return 返回过滤的新值

        

04 使用key属性管理重复元素(虚拟dom原理)

         输入框在切换时原本上一次输入框的内容被保留到了新切换的输入框里面

        原因：

            涉及到Vue的虚拟DOM原理

            在vue当中是双向数据绑定原理是用到objectdefineproperty方法为每一个属性绑定的

            因为原生js操作dom是很消耗性能的因为你每次查找元素都是document就相当于在dom树

            找来找去 如果每次都爬树对树是有损伤的  

            虚拟DOM

            vue挂载以后把所有内容手抄一份就叫做虚拟dom 假设你要操作dom 等一下先不要操作真实dom, 先修改我这个手抄的虚拟的DOM 改完了么？没有的话就接着修改 如果确定不修改了那么中间有一个diff算法 最终修改

        v-for指令在实际开发中必须定义key属性

        使用:key='数组中每一个对象的不重复属性'

        使用key绑定一个不重复的属性值

        如果当前数组或者的对象中没有不重复的值比如id

        只能暂时使用索引值 :key='index'

        但是官方不建议使用索引值

05 MVC 和 MVVM

        M:model模型层负责数据的增删改查

        V:view视图层

        C:controller控制者(业务逻辑层)

        MVVM结构：

            Model--View--View--Model  模型和视图直接绑定

            vue干掉了中间的业务逻辑层实现了模型和视图直接绑定

06 双向数据绑定原理

        vue的双向数据绑定是通过数据劫持 Object.defineProperty()来实现的

        Object.defineProperty()是es5提供出来的一个无法shim(兼容)的特性

        无法兼容ie8以下的浏览器

        Object.defineProperty() 添加/修改属性

        **参数1 把属性添加到哪个对象上面去

        **参数2 : 添加的属性

        **参数3 : 属性描述符 对象形式