Vue的学习笔记

Vue学习框架

1 Vue

2 Vue框架

3 Vue问题

4 Vue生命周期

参考：
https://cn.vuejs.org/v2/guide/instance.html

5 Vue的五个属性

参考：
https://www.cnblogs.com/lyxzxp/p/11778579.html
http://www.ujiuye.com/wenda/2021/70919.html

笔记：
vuex的五个属性分别为：state、getters、 mutations、actions、modules。
state：单一状态树，用一个对象就包含了全部的应用层级状态。
getters：就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
mutations：每个mutation都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。
Action：Action 类似于mutation，不同在于：Action 提交的是mutation，而不是直接变更状态;Action可以包含任意异步操作。
modules：模块化vuex，每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

说明：
state：vuex的基本数据，用来存储变量。
getters：从基本数据（state）派生的数据，相当于state的计算属性。
mutation：提交更新数据的方法，必须是同步的（如果需要异步使用action）。每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）。
回调函数就是我们实际进行状态更改的地方，并且它会接收state作为第一个参数，提交载荷作为第二个参数。
action：和mutation的功能大致相同，不同之处在于：1.Action提交的是mutation，而不是直接更改状态；2.Action可以包含任意异步操作。
modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters，使得结构非常清晰，方便管理。

Vue

参考：https://cn.vuejs.org/v2/guide/installation.html

1. vue.js介绍

渐进式JavaScript框架

• Vue.js优点
  • 体积小
  • 更高的运行效率
    基于虚拟dom，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来病优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM。
  • 双向数据绑定
    让开发者不要再去操作dom独享，把更多的精力投入到业务逻辑上。
  • 生态丰富，学习成本低

Vue.js 全段开发人员必修技能
被广泛的应用于web端，移动端，跨平台应用开发。

1. 安装与部署

第一种安装方式（简单）：
直接下载并用

引入成功，会暴露一个全局的变量，Vue()

第二种引入方式：CDN方式

2. 创建第一个vue应用

声明式渲染
Vue.js的核心是一个允许 采用简洁的模板语法来声明式地将数据渲染进DOM的系统。
Vue.js的应用分为两个重要的部分，一个是视图，一个是脚本。

视图部分，比如使用div标签来定义（指定一个id值），然后使用左右双大括号{{}}来声明变量。
脚本部分，使用script标签来定义，使用new Vuew() 来返回一个应用。
其中，el表示元素element，并使用id选择器（#号开头）来选中视图部分的div。
第二个为data，表示数据，用户保存数据。我们在视图中声明了哪些变量，就需要在data中进行注册并初始化赋值。

HBuilderX 预览：

3. 数据与方法

Vue实例
创建一个Vue实例：
每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的：

var vm = new Vue({
    //选项
})

当一个Vue实例被创建时，它将data对象中的所有属性加入到Vue的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
当这些数据改变时看，视图会进行重渲染。值得注意的是只有当实例被创建时data中存在的属性才是响应式的。

对变量使用Object.freeze()，这会阻止修改现有的属性，也意味着相应系统无法再追踪变化。

除了数据属性，Vue实例还暴露了一些有用的实例属性与方法。它们都有前缀watch是一个实例方法，可以观察一个变量的变化，并且获取变化前/后的结果。
该方法第一个参数为需要观察的变量，第二个参数为一个回调，回调参数的参数分别为newVal和oldVal。

4. 生命周期

每个Vue实例在被创建时都要经过一系列的初始化过程，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会晕习惯一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

比如 creatd钩子可以用来在一个实例被创建之后执行代码。
也有一些其他的钩子，在实例生命周期的不同阶段调用，如mounted、updated和destroyed，生命周期钩子的this上下文执行调用它的Vue实例。

注意：
不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有this，this会作为变量一直向上级词法作用域查找，直到找到为止，经常导致Uncaught TypeError：Cannot read property of undefined 或 Uncaught TypeError：this.myMethod is not a function 之类的错误。

扩展：
点击官网上的学习，可以进入 选项/生命周期钩子，学习生命周期API介绍。

API：
beforeCreate 在实例初始化之后，数据观测（data observer）和event/watcher事件配置之前被调用。
created 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测（data observer），属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 替换，挂载成功。
beforeUpdate 数据更新时调用
updated 组件DOM已经更新，组件更新完毕。

设置类似定时器或者延时函数方法：如下是在3秒之后更新msg变量的数据。

 setTimeout(function(){
    vm.msg = "change ...";
}, 3000);

注意：该方法执行时，会有beforeUpdate和updated两个回调。

其他API：
activated keep-alive组件激活时调用。该钩子在服务器端渲染期间不被调用。
deactivated keep-alive组件停用时调用。该钩子在服务器端渲染期间不被调用。
beforeDestroy 实例销毁之前调用，在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
destroyed Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
errorCaptured 2.5.0+新增。当捕获一个来自子组件的错误时调用。

5. 模板语法-插值

模板语法：
Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。
在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue能够智能地计算出最少需要重新渲染多少组件，并把DOM操作次数减到最少。
如果你熟悉虚拟DOM并且偏爱JavaScript的原始力量，你也可以不用模板，直接写渲染（render）函数，使用可选的JSK语法。

插值：

• 文本：
  数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值。
  Mustache标签将会被替代为对应数据对象上msg属性的值。无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。
  通过使用v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定。

• 原始HTML
  双大括号会将将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，你需要使用v-html指令。

• 特性
  Mustache语法不能作用在HTML特性上，遇到这种情况应该使用v-bind指令。
  

  
  对于布尔特性（它们只要存在就意味着为true），v-bind工作起来略有不同。
  Button
  如果isButtonDisabled的值是null、undefined或false，则disabled特性设置不会被包含在渲染出来的元素中。
  格式为：

v-bind:属性=""

• 使用JavaScript表达式

{{ number + 1}}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

{{ var a = 1}}  //这是语句，不是表达式
{{if (ok) {return message} }} //流控制也不会生效，请使用三元表达式

注意：模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如Math和Date，你不应该在模板表达式中试图访问用户定义的全局变量。

6. 模板语法-指令

指令：
指令（Directives）是带有v-前缀的特殊特性。指令特性的值预期是单个JavaScript表达式（v-for是例外情况）。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

you see me now

这里，v-if指令将根据表达式 seen 的值的真假来插入/移除

元素。

• 参数：
  一些指令能够接收一个“参数”，在指令名称之后以冒号表示，例如，v-bind指令可以用于响应式地更新HTML特性。

...

在这里 href 是参数，告知v-bind指令将该元素的 href 特性与表达式 url 的值绑定。
另一个例子是v-on指令，它用于监听DOM事件。

...

在这里参数是监听的事件名。

• 动态参数

• 修饰符
  修饰符（modifier）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉v-on指令对于触发的事件调用 event.preventDefault()

...

• 缩写
  v- 前缀作为一种视觉提示，用来识别模板中Vue特定的特性。当你在使用Vue.js为现有标签添加动态行为（dynamic behavior）时，v- 前缀很有帮助，然而，对于欧一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由Vue管理所有模板的单页面应用程序（SPA - single page application）时，v- 前缀也变得没有那么重要了。因此，Vue为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写。
  简写格式：

7. class与style绑定

class与style绑定：
操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind用于 class 和 style 时，Vue.js做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

绑定HTML Class

• 对象语法
  我们可以传给 v-bind:class 一个对象，以动态地切换class。
  
  
  上面的语法表示active这个class 存在与否将取决于数据属性isActive 的truthless。
  你可以在对象中传入更多属性来动态切换多个class。此外， v-bind:class 指令也可以与普通的class 属性共存。当有如下模板：

和如下 data：

data: {
    isActive: true,
    hasError: false
}

结果渲染为：

当isActive或者hasError变化时，class列表将相应地更新。
特别注意：这里class对应的是CSS样式，需要在

其中：脚本区域
声明组件的名称/属性/方法/数据等