《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 安装并启动 ...
随机推荐
- [TimLinux] docker CentOS7入门——服务(2)
1. 服务含义 分布式应用中,应用的不同部分即称为“服务”,视频网站是一个分布式应用,包含有:数据的存储,视频的转码,前端展示等部分,对应的这些部分即称为相应的服务.docker平台中,定义.运行和扩 ...
- 模电&数电知识整理(不定期更新)
模电总复习之爱课堂题目概念整理 Chapter 1 1) 设室温情况下某二极管的反偏电压绝对值为1V,则当其反偏电压值减少100mV时,反向电流的变化是基本不发生变化. 2) 二极管发生击穿后,在击穿 ...
- 《java面试十八式》--引子
爪哇城中 “喂,你等等我啊”少女气喘吁吁的喊道 “大小姐,你可快点吧,报名马上就要结束了.” 这是爪哇城一年一度的大选比赛,被选上的人会留下来任职,享有名誉和金钱,所以大家都在积极准备. ...
- markdownPad在win10下渲染报错问题
今天使用MarkdownPad 2,打开后发现预览效果出错了,本来以为自己下载了破解版的缘故导致软件不稳定,后来查找了网上,发现这是一个普遍的问题,根据软件的提示来到官方FAQ页面,找到解决方法. 实 ...
- debian官网qcow2镜像修改root账号密码,开启ssh等
1.下载官网qcow2镜像文件 wget http://172.16.20.10/vmtemplate/KVM/wangrui/Debian/debian-10.2.0-openstack-amd64 ...
- ubuntu16.04没有办法使用CRT,或者SSH工具的解决办法
首先要明确一点,ubuntu16.04是默认没有安装SSH工具的 情况1 首先需要切换到root模式,然后在进行安装 设置root密码 sudo passwd 然后 sudo apt-get ins ...
- Docker容器监控
利用docker compose组合应用并利用scale可以快速对容器进行扩充,而docker compose启动的服务容器都在同一台宿主机上,对于一个宿主机上运行多个容器应用时,容器的运行情况,如: ...
- 【Java】在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数。
题目描述: 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整 ...
- MySQL的安装、启动和基础配置 —— windows版本
下载 第一步:打开网址,https://www.mysql.com,点击downloads之后跳转到https://www.mysql.com/downloads 第二步 :跳转至网址https:// ...
- ssm整合——Spring配置(2)
配置Spring 1. 环境准备 使用之前搭建Mabatis的环境 1.1 新建目录 新建spring的service业务逻辑包 在resources目录下新建spring的配置文件:applicat ...