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)

转载于:https://www.cnblogs.com/M29006/p/10902374.html

vue(2)---computed,watch--2019.5.21学习笔记相关推荐

  1. Vue+Webpack打造todo应用(慕课学习笔记)

    这门课在慕课网是免费的,但有部分包已被弃用需要用其他包代替,详细见官网.我还不想看官网,所以先放着吧. 关于模块打包的课程可以重刷 [仅个人记录,还不完整.暂时没有参考意义哦] 别人的项目源码.我的项 ...

  2. vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍

    这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...

  3. Vue教程-day03-2018年12月21日笔记

    文章目录 上午 - 9点 - 12点 - 3小时 第44个视频 - javascript高阶函数的使用 filter函数 map函数 reduce函数 需求用高阶函数实现 链式编程 箭头函数 之前的购 ...

  4. 【Vue】菜头学前端 - vue3学习笔记

    目录 简介 一.创建项目 1.使用vue-clli创建 2.使用Vite创建 二.Composition API(组合式API) 1.setup函数 2.ref函数和reactive函数 1.ref函 ...

  5. methods vue过滤器 和_Vue 2.0的学习笔记:Vue的过滤器

    在这篇文章里,我们将讨论一个叫过滤器的东西.过滤器提供了一种执行文本转换的方法,比如说都转成大写字母或者几乎做任何我们想做的事情.过滤器既可以在文本插值中使用,也可以在v-bind指令的表达式中使用. ...

  6. 基于有Vue基础的微信小程序开发学习笔记

    微信小程序开发 文章目录 微信小程序开发 一.微信小程序介绍 二.小程序结构目录 1.小程序的文件结构 2.基本项目目录 三.配置文件详解 1.全局配置文件 2.页面配置文件 3.sitemap配置 ...

  7. vue 判断对象不为空_Vue 学习笔记(二):实例

    创建一个实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项}) 虽然没有完全遵循 MVVM 模型,但是 Vue 的设计 ...

  8. 【2018.06.21学习笔记】【linux高级知识 14.1-14.3】

    2019独角兽企业重金招聘Python工程师标准>>> 14.1 NFS介绍 NFS服务全称是NetWork File System:网络文件系统,最早有sun公司开发的,4.0版本 ...

  9. 2019新冠状病毒学习笔记

    最近这波疫情,重现当年初中非典时期,甚至愈演愈烈,与之前初中时的封校住宿学习不同,已经工作的今天和太多的互联网信息大爆炸让我们有些焦虑,特别是,作为学习生物的人,我们也感到无能为力.官方媒体的科普,已 ...

最新文章

  1. 【组队学习】【31期】青少年编程(Scratch 四级)
  2. php连接MYSQL(2)
  3. aqs java 简书,Java AQS源码解读
  4. 如何在Spring中将@RequestParam绑定到对象
  5. 手机MODEM 开发(33)---SimCard 学习总结
  6. 前端面试题汇总(css基础篇)
  7. ubuntu16.04中ROS-Kinetic安装Arbotix
  8. paip.SVN merge分支合并到主干
  9. Gephi入学教程基础记录
  10. 三菱GX Work2 PLC工控仿真
  11. 【阿卡乐谱】【日常分享】超级强大的简谱-《茉莉花》
  12. PetaLinux学习笔记 1
  13. 最新鸽哒IM即时通讯系统源码+带安装教程
  14. 淘宝店铺运营经验分享,影响宝贝转化率的因素有哪些,如何提高转化
  15. 【HDOJ】6441--Find Integer
  16. 淘宝电商数据分析-Tableau
  17. 三星80亿美元收购Harmon真正意图是它?
  18. 利用监听器实现网站在线人数统计
  19. Ubuntu 20.04 美化终端
  20. 微信小程序原生常用语法 1

热门文章

  1. python 去除多个换行
  2. 你真的了解JavaScript的比较运算符(==,!=,===,!===,=,=,,)吗?
  3. SAP S/4HANA销售订单创建时,会自动触发生产订单的创建
  4. mysql状态常用参数分析
  5. ArcGIS Desktop 10.1安装教程
  6. Android 5.1上MultiDex异常: DexPathList NoSuchMethodException makeDexElements
  7. 阿里云RDS的mysql数据库占用空间超过90%的处理
  8. Redhat Linux网卡配置与绑定
  9. 只能是数字、字母、-和_
  10. springboot 定时任务schedule