Vue知识点 笔记

---

router-view

router-view在哪个组件下,就是谁的children,因为App.vue处于一级
所以router/index.js的路由配置从App组件开始生效,属于同一级别
的可以通过router-view依据路由配置实现不同组件的显式,如果是
下一级需要一句路由切换组件则需要配置children子级路由

关于Vue组件通信的总结我提取到另一篇Vue组件通信 小结

M V VM

M 模型 data
V 视图 模板
VM 模型视图 Vue实例 负责 M和V之间的解析与渲染

vue可以实现

1.数据绑定,数据响应式 v-model v-text ...
2.属性动态绑定    :attribute
3.样式动态绑定   :style={} 用json对象绑定
4.基本事件的绑定 @click
5.循环遍历输出数组 item in var

vue

1.采用组件化模式,提高代码复用率,且代码易于维护
2.声明式编码,无需直接操作DOM,提高开发效率

v-model只用于输入类元素:表单类元素,v-model默认选择就是value属性

箭头函数没有this

data中的数据和_data中的数据是一个东西
vm上的东西以及原型上的所有的属性和方法都可以在view上用

数据代理:

1.Vue中的数据代理通过vm对象来代理data对象中属性的操作 读/写
2.基本原理:
    通过Object.defineProperty()把data对象中所有属性添加到vm上
    为每一个属性指定getter,setter在getter,setter内部去操作data
    中对应的属性


    data{
        中的数据会做数据代理和数据劫持已完成响应式的页面响应
    }

键盘事件:

tab是一个特殊的键应配合keydown使用而不是keyup
CapsLock需要写成@click.caps-lock

计算属性 computed

计算属性不存在,要通过已有的属性计算出来
底层使用Object.defineProperty方法提供的getter和setter方法
get方法什么时候执行
    1.第一次读取时会执行
    2.当依赖的数据改变时会被再次调用
与methods相比computed是有缓存的

侦听对象

当监视的对象改变时会调用处理逻辑handler

看起来computed和watch都可以实现firstName和lastName的相加,但是
计算属性是不能实现异步的任务的,而watch可以,因为computed是靠返回值

computed和watch对比

1.computed可以完成的watch也可以完成
2.watch可以完成的computed不一定可以完成,例如watch实现异步操作
    原则:
        1.所被vm管理的函数,最好写成普通函数,这样this指向的是vm或者组件实例
        2.所有不被vue管理的函数(定时器的回调函数,ajax的回调函数),最好写成
        箭头函数,这样this指向的才是vm 或 组件实例

        目标就是让this指向vm

v-for指令

1.用于展示列表数据
2.语法 v-for="(item,index) in xxx" :key="xxx"
3.可遍历:数组,对象,(字符串,指定次数)

vue的监视原理

vue的data数据会被首先加工成_data,然后通过defineProperty实现对数据的监视
当值被改了,就会调用setter,getter,然后去解析模板,生成虚拟dom...

data

数据需要先收集到_data中,然后做了数据代理,代理到vm上

数组操作

vue对数组的元素是没有对应的getter,setter的,所以需要对数组进行监控
push
pop
shift
unshift 头部插入
splice 指定位置插入
sort
reverse
使用vue对数组添加元素时,对以上7种方法做了包装,会先调用Array原型上的方法如push,
然后去解析模板

vue监视数据的原理(实现响应式)

1.vue会监视data中所有层次的数据
2.如何监视对象中的数据
    1.通过setter实现监视,且要在new Vue时传入要监视的数据
        对对象追加睡醒Vue默认不做响应式处理
        如需要后期添加属性做响应式,请使用
            Vue.set(target,property/index,value)
            this.$set(target,property/index,value)
3.如何监视数组中的数据
    通过包装数组常用的更新元素的方法,本质做了两件事
        1.调用原生api对数组进行更新
        2.重新解析模板,进行页面更新
4.在Vue中修改数组的某个元素一定要使用如下方法
    push
    pop
    shift
    unshift 头部插入
    splice 指定位置插入
    sort
    reverse

    Vue.set() this.$set()
特别注意Vue.set() this.$set()不能给vm或者vm的根对象添加属性!!!

数据劫持:

_data是一个Observer监视器,_data中的数据是vm传入的要监控的数据
当有人要修改传入的数据时Observer的setter就会劫持数据的发改变,然后重新解析模板
重新渲染(劫持到后:重新改数据 > 解析模板 > 更新页面)

如何通过v-model去收集表单中的数据

对于表单的输入数据通过v-model收集value
<input type="number" v-model.number="userInfo.age"><br>
对于checkbox,如果没有配置value则默认收集的是checked的值true or false
v-model的初始值是非数组,收集的是checked的值,如果是数组,则收集value的值

v-model的三个修饰符
    .number
    .trim
    .lazy
input没有配置value则收集checked的值,如果配置了value如果给的是非数组,仍然收集的是checked的值
像复选框这样的本身就不需要输入,所以需要配置value

vue的过滤器是对数据