computed:计算属性 通过属性计算得来的属性
1.computed里面的函数建议由返回值,不建议去修改data中的属性
2.在使用computed中的方法时,是不需要加()
3.computed是基于vue的依赖 当computed所依赖的属性发生改变的时候就会触发相对应的方法
4.当computed中的函数执行完毕后会进行缓存,当下次所依赖的属性没有发生变化的时候会从缓存中读取结果
特点:
一个属性受多个属性的影响(应用:购物车的结算,商品筛选...)
过滤器:用来过滤数据的一个接口
全局 Vue.filter()
参数1:过滤器的名称
参数2:过滤器实现的方法
如何使用过滤器
通过管道符进行使用 管道符左边的是渲染的数据 右边是过滤器的名称
局部 Vue.filters:{}
面试题:
Vue实例方法:
$on:绑定事件
参数1:事件名称
参数2:绑定的事件函数
$emit:触发事件
参数1:事件名称
参数2:需要传递给事件函数的参数
$off:解绑事件
参数1:事件名称 如果只写一次参数的话会解绑所有的事件
参数2:需要解绑的事件函数
$once:绑定一次事件
vm身上的属性:(未完)
在vm的外部访问data中的属性
watch:属性的监听
特点:一个属性影响多个属性(应用:模糊查询,网页的自适应)
1.watch中的函数名称必须是data中的属性
2.watch中的函数会接收两个值 一个是新值一个是旧值
3.watch中的函数是不需要调用的,当所依赖的属性发生了改变,那么就会调用相关的函数
4.在watch的属性监听当中尽量不要去修改data中的属性
5.watch监听属性的时候只会监听对象的引用是否会发生改变,而具体的属性值发生改变是不会进行监听的
6.watch做属性监听的时候如果属性是一个对象,那么需要做深度监听,利用handler与deep进行深度监听(深度监听非常耗费性能)
7.watch初始化的时候是不会执行的,如果设置了immediate:true 则初始化的时候会执行一次
8.watch不会对数组的修改(特殊情况)进行监听
解决数组特殊监听问题:
1.$set()
$set:给一个响应式对象添加一个属性,并且这个属性也是响应式的
对象:this.set(target,key,val)
数组:this.set(target,index,val)
能用computed解决的问题不要用watch,watch消耗的性能高
$mount() 挂载 外部挂载
$destroy() 卸载 外部卸载
$forceUpdate() 强制更新
组件:页面上的任何一个部分都是组件
简单:html css js等进行封装好的一个功能 便于二次的维护和复用
模块:大的功能 每个模块内部都会引入N个组件 模块包裹组件
组件的创建
全局组件:
Vue.component()
参数1:组件名称 组件名称建议都用大写 为了区分组件标签与html标签
参数2:组件的配置项->对象
组件里面的配置项跟vm的配置项一模一样
但是有两个点不一样:
1.多了一个template属性
2.data不再是一个对象,而是一个函数
template:当前组件的结构
局部组件:
components:{}
脚手架的使用:
1.全局安装脚手架
cnpm install @vue/cli -g
2.用脚手架构建项目
vue create 项目名称
3..vue文件
template 写组件的结构 html
script 写组件的逻辑 js
style 写组件的样式 css
一个.vue文件相当于一个组件
render:渲染组件(虚拟DOM)
