什么是Vuex

在Vue官方网站的解释是： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 。

使用Vuex常见的关键词

• store：仓库容器， 包含应用中大部分的状态 (state)
• state：数据状态
• mutations：更改 Vuex 的 store 中状态的唯一方法是提交 mutation
• commit： 调用 store.commit 方法，触发 mutation
• mapState：借助mapState辅助函数获取store中保存的状态，避免当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性时代码冗余

问题描述

vue中js数据改变视图层数据未更新,点击改变欢迎语按钮，控制台显示hi已经变化，但是视图层中的hi没有变化。

father.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<template>
    <div>
        <!--v-bind来绑定动态数据，静态数据可以不用v-bind指令(:是v-bind的简写)-->
        <h1>以下内容为父组件内容</h1>
        <p >{{hi}}</p>
        <button v-on:click="changeHi">改变欢迎语</button>
        <child-component :message='message' @listenToChild='getChildData'></child-component>

    </div>


</template>

<script>
    import child from './child.vue';
    export default {
        name: "father",
        data() {
            return {
                message: '我是父组件的数据',
                hi:"你好，我来自父组件"
            }
        },
        components: {
            'child-component': child
        },
        mounted(){
            // this.changeHi();
        },
        methods: {
            getChildData (val) {
                console.log(this.hi);
                this.hi = val;
                console.log(this.hi);
                console.log(`子组件传递过来的数据: ${val}`); // hello
            },
            changeHi(){
                console.log(this.hi);
                this.hi = "你好，我来自父组件，但我改变了";
                console.log(this.hi);
            }
        },
    }
</script>

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

使用vue框架，需要在合适的时机做合适的事情，了解了vue对象的生命周期和钩子函数，才能知道，哪些事情应该咋哪个函数里做。

事件冒泡

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

执行环境是JavaScript 中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。

#一. 背景介绍

执行环境是什么

执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。 每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。 我们编写的代码是无法访问这个对象的，但解析器在处理数据时会在后台使用它。

业务逻辑是什么？

不同的项目有不同的功能，不同的功能需要不同的实现，实现这些核心功能的代码就叫业务逻辑。

让你实现一个功能，给你两个数，让你获取它的和，你所写的如何才能获得任意给定的两个数的和，这个程序实现过程称为业务逻辑处理。

就像家里规矩–“吃饭前必须洗手”“有客人来要起立”-就是业务逻辑的生活化实例。
简单来就是在怎么做事（how to do）, 比方说你去餐馆吃饭, 你点了个炒米粉，服务员给你下单，厨房见到单后下锅给你炒，你吃完后付账。这一些列动作都可以说是业务逻辑。

在使用JavaScript对数组进行操作的时候，我们经常需要将数组进行备份，事实证明如果只是简单的将它赋予其他变量，那么我们只要更改其中的任何一个，然后其它的也会跟着改变，这就导致了问题的发生。原因是内存中仅保留一份数据。这时候需要制作一份数据的副本。只有复杂类型变量（引用类型）存在深拷贝与浅拷贝的问题，而基本类型没有深拷贝的概念。

在 JavaScript 中，大多数事物都是对象, 从作为核心功能的字符串和数组，到建立在 JavaScript 之上的浏览器 API。你甚至可以自己创建对象，将相关的函数和变量封装打包成便捷的数据容器。理解这种面向对象 (object-oriented, OO) 的特性对于进一步学习 JavaScript 语言知识是必不可少的。这个模块将帮助你了解“对象”，先详细介绍对象的设计思想和语法，再说明如何创建对象。

let 命令

基本用法

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

1
2
3
4
5
6
7

{
  let a = 10;
  var b = 1;
}
 
a // ReferenceError: a is not defined.
b // 1

ECMAScript 6 简介

1. ECMAScript 和 JavaScript 的关系
2. ES6 与 ECMAScript 2015 的关系
3. 语法提案的批准流程
4. ECMAScript 的历史
5. 部署进度
6. Babel 转码器
7. Traceur 转码器

《ES6 实战教程》 深入学习一线大厂必备 ES6 技能。VIP 教程限时免费领取。 ⇐ 立即查看