《Vue笔记01: 我与唐金州二三事》
最近我在收看唐金州在极客时间发布的《vue从入门到精通》,颇有收获。
唐金州,一点资讯前端技术专家,曾在蚂蚁金服就职,也是开源组件库ant design vue的作者,虽然唐老师写的ant design vue有一些瑕疵,但不得不承认,能以一己之力撸完一个UI框架,是真的强,而他本人对于vue的理解也到很深的境界,于是我特做此视频笔记,较为零散,没什么章法,只是对于一些比重要的或者比较细节的地方做一下记录。
1,Props中的对象和数组类型必须从一个工厂函数获取,比如 List: { typs: Array, default: ()=>[], }
2,给组件动态传递属性时,属性值最好用破折号分开,如 <card :is-visible=“isCardVisible” />,但是在子组件的props中,可以用isVisible获取回来。因为在html中,大小驼峰语法(camelCase)等价于全小写的破折号语法(kebab);
3,原生属性如style,title,class如果传递给了子组件,会默认挂载到子组件的根元素上;
4,父组件向子组件注入方法,实则是注入了方法的指针,子组件在调用的时候还是调用到父组件里面;
5,this.$emit会返回当前组件的vue实例,也就是this指向的堆内存中地址;
6,建议组件以大写字母开头;
7,v-slot:name可以代替slot=“name”, v-slot:name=“(index, record)”可以代替slot=“name” 加上slot-scope=“index, record”;
8,为了减少复杂度,virtual dom的diff算法的基本概念就是”只做同层级节点比较”;
9,如果没有key值,diff算法在做同层级节点比较时,会严格按照时间顺序去对比,因为缺乏身份标识器key,导致甚至连顺序调换这种场景都无法识别,会直接销毁重建;所以它在同层级比较的时候并不知道下一级的关系会是怎样,它只关注当前层级的节点。这看起来是一个坏处,其实更是一个好处,只专注于当前层级的复杂度是最低的。 所以如果有key的话,在新的同层节点生成的时候,就会根据key值去找原同层节点组有没有完全相同,尽可能复用老节点。 所以key值的作用就是为了关闭严格顺序节点对比法则,尽可能复用相同节点,节省删除新建节点的开销。
10,组件的数据来源分为属性(通过props传进来的),以及状态(自身的data)。
11,只有被html用到的属性才会去做依赖收集,到时候才会去做更新通知。
12,如果需要对data的某个对象的某个属性值做监听,可以通过computed把这个属性值的层级提上来,然后在watch中监听computed里面的属性。
13,重置vue实例的data: Object.assign(this.$data, this.$options.data());
14,强制刷新template模板: this.$forceUpdate;
15,watch函数的参数依次为newVal, oldVal;
16,计算属性computed的优势就在于它可以监听多个数据依赖,当然用watch也可以,但是这样我们就要手动为每个数据依赖添加watch函数,显得十分冗余。
17,能用computed的地方就用computed。
18,provide提供响应式数据到子孙组件的最佳方式是直接把this指针赋给一个变量,然后传给子孙组件,子孙组件通过点运算符来取相应属性。
19,说明provide的查找类似于作用域链,从下往祖先组件找,一旦找到就停下了。
20,ref如果挂载到html元素上,会取到一个DOM节点;如果挂载到一个组件上,会取到这个组件的实例对象。
《Vue笔记01: 我与唐金州二三事》的更多相关文章
- 简单物联网:外网访问内网路由器下树莓派Flask服务器
最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...
- 利用ssh反向代理以及autossh实现从外网连接内网服务器
前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...
- 外网访问内网Docker容器
外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...
- 外网访问内网SpringBoot
外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...
- 外网访问内网Elasticsearch WEB
外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...
- 怎样从外网访问内网Rails
外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...
- 怎样从外网访问内网Memcached数据库
外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...
- 怎样从外网访问内网CouchDB数据库
外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...
- 怎样从外网访问内网DB2数据库
外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...
- 怎样从外网访问内网OpenLDAP数据库
外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...
随机推荐
- python原类、类的创建过程与方法
今天为大家介绍一下python中与class 相关的知识-- 获取对象的类名 python是一门面向对象的语言,对于一切接对象的python来说,咱们有必要深入的学习与了解一些知识 首先大家都知道,要 ...
- Seata AT 模式启动源码分析
从上一篇文章「分布式事务中间件Seata的设计原理」讲了下 Seata AT 模式的一些设计原理,从中也知道了 AT 模式的三个角色(RM.TM.TC),接下来我会更新 Seata 源码分析系列文章. ...
- keychain 的学习
keychain 的使用 http://www.cnblogs.com/ios8/archive/2012/06/25/iOS-keychain.html
- JsonModel的使用
本人最近在开发一款医疗类的APP 发现接口返回的数据很复杂 手动解析的话对新手来说就是一场灾难 在分解成所需要的model类型时工作量非常的大,于是从网上查阅相关资料,发现JsonModel这个第三方 ...
- Django中直接执行SQL语句
欢迎加入python学习交流群 667279387 今天在django views.py看到同事写的代码里面有段关于数据库查询的语句.因为涉及多个表的查询,所以django 的models的查询无法满 ...
- Python字符串学习
Python字符串(不可变的): 一.相关的运算: 1.字符串的拼接: str = str1 + str2 2.字符串的重复: print(str * 3) 3.下标访问字符串某个字符: str[1] ...
- 《Java基础知识》Java final关键字:阻止继承和多态
在 Java 中,声明类.变量和方法时,可使用关键字 final 来修饰.final 所修饰的数据具有“终态”的特征,表示“最终的”意思.具体规定如下: final 修饰的类不能被继承. final ...
- Python:日期和时间的处理模块及相关函数
Python:日期和时间的处理模块及相关函数 Python 提供 time 模块和 calendar 模块用于格式化日期和时间. 一.时间戳 在Python中,时间戳是以秒为单位的浮点小数,它是指格林 ...
- .NET Core依赖注入集成Dynamic Proxy
在<Castle DynamicProxy基本用法>中介绍了如何将DP与Autofac集成使用,而 .NET Core有自己的依赖注入容器,在不依赖第三方容器的基础上,如何实现动态代理就成 ...
- 一起学MyBatis之入门篇
概述 本文以一个简单的小例子,简述在Java项目开发中MyBatis的基本用法,属于入门级文章,仅供学习分享使用,如有不足之处,还请指正. 什么是MyBatis? MyBatis 是一款优秀的持久层框 ...