Vue学习笔记:Vue组件的核心概念(下)
1.双向绑定和单向数据流:
2.虚拟DOM及KEY属性作用
- jquery:
- vue:
- virtual dom
- 新旧DOM树比较
同层级比较:
- 节点移动
- 不带Key移动
- 带Key移动
- 插入
- 有KEY(性能高)
- 节点删除新建
(算法因为同层级策略,无法达到最优解)
3.如何触发组件更新
数据驱动
任何修改DOM的行为都是在作死!
数据来源(单向)
状态data和属性props
- 状态是组件自身的数据
- 属性是来自父组件数据
- 状态改变未必会出发更新
- 属性改变未必会出发更新
响应式更新原理
4.计算属性和侦听器
计算属性:
可以在里面写些逻辑的属性
好处:
- 减少模板中计算逻辑
- 数据缓存
- 依赖固定数据类型(响应式数据)
侦听器
好处:
- 更加灵活,通用
- 可以执行任何逻辑,如函数节流,ajax异步获取数据,甚至操作节点。
二者区别
- 计算属性能做的,侦听器都能做,反之则不行
- 能用计算属性的尽量用它
5.生命周期的应用场景和函数式组件
生命周期
创建阶段分解
更新阶段分解
销毁阶段分解
函数式组件
- 申明:functional:true
- 无状态,无实例,没有this上下文,无生命周期
- 用途:临时变量用来存储重复计算
可以简单的认为他是一个方法,它的用法不同于计算属性:
- 必须依赖响应式数据;
- 模板中需要依赖v-for,v-if
- 可能依赖全局数据
TempVar.js
Vue学习笔记:Vue组件的核心概念(下)的更多相关文章
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)
五 Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...
- Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)
Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)
- Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)
(五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...
- Vue学习笔记-Vue基础入门
此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...
- Vue学习笔记-Vue.js-2.X 学习(七)===>脚手架Vue-CLI(路由Router)
脚手架Vue-CLI(路由Router) 一 按装(通过新创建脚手架按装),如果在原来的脚手架上按装直接进图型化界面vue ui的插件按装. 二 使用(上面按装下面步骤自动会生成) 第一步:导入路由对 ...
- Elasticsearch学习笔记(六)核心概念和分片shard机制
一.核心概念 1.近实时(Near Realtime NRT) (1)从写入数据到数据可以被搜索到有一个小延迟(大概1秒): (2)基于es执行搜索和分析可以达到秒级 2.集群(Cluster) 一个 ...
随机推荐
- Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
使用vue init webpack 你的项目名称初始化一个vue的项目 安装依赖 npm install vue-resource http-proxy-middleware vuex koa 在项 ...
- SpringBoot2.x升级踩坑--新增Configuration property name限制
最近公司项目在做SpringBoot的升级,在升级过程中遇到了一些问题,简单记录一下,做个分享.另外,本文中的程序只为示例代码,并非公司生产环境代码. 遇到什么问题 从SpringBoot1.x升级到 ...
- 客户端 SOCKET 编程
建立客户端的 Socket: 客户端应用程序首先也是调用 WSAStartup() 函数来初始化 Winsock 的动态连接库,然后同样 调用 socket() 来建立一个 TCP 或 UDP Soc ...
- python如何判断一个对象是否是可迭代的?
from collections import Iterable test_data = [{"type":1,"keyword":None}, {" ...
- 每日温度(LeetCode Medium难度算法题)题解
LeetCode 题号739中等难度 每日温度 题目描述: 根据每日 气温 列表,请重新生成一个列表,对应位置的输入是你需要再等待多久温度才会升高超过该日的天数.如果之后都不会升高,请在该位置用 0 ...
- js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的区别
js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总,测试浏览器:ie7~ie11.chrome 和 firefox ...
- win32API多线程编程
win32线程API 在Windows平台下可以通过Windows的线程库来实现多线程编程. 对于多线程程序可以使用Visual Studio调试工具进行调试,也可以使用多核芯片厂家的线程分析调试工具 ...
- 解决 IDEA 创建 Gradle 项目没有src目录
第一次写博客,前几天遇到一个问题,就是使用ider创建gradle项目后,src目录没有自动生成出来,今天就给大家分享一下怎么解决. 目录: 1.创建Gradle项目 2.解决没有生成src目录问题 ...
- JDK1.8 新特性详解
一 引言 现在java 10都已经出来了,而自己对java 8的一些新特性都不了解,很是惭愧,而且许多面试都有问到java8的新特性,借此博客好好学习这些新特性 二 新特性 1 default关键 ...
- unity www下载导致内存占用增加问题
服务端或者数据库更改导致客户端更改,最合理的处理方法是客户端时刻检测版本号(可以通过实时检测版本号),如果实时刷新数据库的数据开销比较大,尤其是有图片元素时. 采用unity www类下载时,虽然结束 ...