Vue「三」—— vue 侦听器、vue 计算属性、vue-cli、vue 组件

Vue 系列笔记第三篇，陆续更新，✌✌专栏阅读：

‍‍ > Vue「一」—— 前端工程化 与 webpack 的基本使用及常用配置

> Vue「二」—— vue 基本使用 、 vue 指令与过滤器

一、watch 侦听器

---

watch 侦听器 允许开发者监视数据的变化，从而针对数据的变化做特定的操作。也就是 当数据发生变化时，及时做出响应处理 。

侦听器基本语法

下面是采取方法格式来定义侦听器，这种方法比较简便常用。此外，如果遇到某些特殊需求时，也可采取对象格式来定义侦听器（后文介绍）。

    <div id="app">
        <input type="text" v-model="username">
    div>
    <script>
        const vm = new Vue({
       
            el: "#app",
            data: {
       
                username: ''
            },
            // 侦听器定义在 watch 节点下
            watch: {
       
                username(newVal, oldVal) {
       
                    console.log('', newVal, oldVal);
                }
            }
        })
    script>

文本框中连续输入 1、2、3 ，打印效果如下：

几个注意点

1. 所有的侦听器，都应该定义在 watch 节点下。
2. 侦听器本质上是一个函数，要监听哪个数据的变化，只需把对应数据名作为方法名即可。
3. 注意新值在前面，旧值在后面。
4. 此外，这种方法默认不会被自动调用，也就是刚打开页面时不会触发侦听器。
    

对象格式的侦听器

此前侦听器的写法是方法格式的写法，也就是直接将对应数据名作为方法名来写函数。这种方法是最常用的，因为它比较简便。

你也可以利用对象格式来定义 watch 侦听器，如下：

	watch: {
     
	    username: {
     
	        // handler 是固定写法，表示当 username 的值变化时，自动调用 handler 处理函数
	        handler(newVal, oldVal) {
     
	            // 。。。
	        }
	    }
	}

这种语法下，需要将侦听器的响应处理写在 handler(){} 方法内。
 

immediate 选项

默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使用 immediate 选项 。

     watch: {
     
        username: {
     
            handler(newVal, oldVal) {
     
                console.log(newVal);
            },
            // 默认 false, 控制侦听器是否自动触发
            imediate: true
        }
    }

deep 选项

如果 watch 侦听的是一个对象，如果对象中的 属性值发生了变化，则 无法被监听 到。此时需要使用 deep 选项 。

    watch: {
     
        info: {
     
            handler(newVal, oldVal) {
     
                console.log(newVal.username);
            },
            // 开启深度监听，只要对象中任何属性变化，都会触发
            // deep 默认值为 false
            deep: true
        }
    }

注意：这里的 newVal 是 info 对象，而不是变化的属性值。
 

监听对象单个属性的变化

如果只想监听对象中 单个属性 的变化，则可以按照如下的方式定义 watch 侦听器。

    watch: {
     
        'info.username': {
     
            handler(newVal, oldVal) {
     
                console.log(newVal);
            }
        }
    }

 

二、计算属性

---

计算属性指的是通过一系列运算之后，最终得到一个属性值。这个动态计算出来的属性值可以被模板结构或 methods 方法使用。

所有的计算属性都要定义在 computed 节点之下，计算属性在定义时要定义成方法格式。如下所示：

    
    <div class="box" :style="{ backgroundColor: rgb }">
        {
    { rgb }}
    div>

    var vm = new Vue({
     
        el: '#app',
        data: {
     
            r: 0, g: 0, b: 0
        },
        computed: {
     
            rgb() {
     
                return `rgb(${
       this.r},${
       this.g},${
       this.b})`;
            }
        }
    });

两点好处：

1. 计算属性提高了代码的复用。
2. 当所依赖数据发生变化（data 中数据变化）时，它会自动重新运算。

 

三、vue-cli

---

单页面应用程序

单页面应用程序 （Single Page Application）简称 SPA，指的是一个 Web 网站只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。

如上图所示，整个项目都是通过唯一一个 HTML 页面 index.html 来呈现的，这就叫做单页面应用程序。

 

什么是 vue-cli

vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化 Vue 项目的过程。

vue-cli 官网 是这样介绍的：Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。

 

vue-cli 的安装

vue-cli 是 npm 上的一个 全局包，可以通过 npm 进行安装：

	npm install -g @vue/cli

 

vue-cli 的使用

1. 在终端下运行如下的命令，创建指定名称的项目

	 vue create 项目名称

2. 手动选择要安装的模式，建议初学时选择第三项，可以自定义很多功能。
   
3. 手动选择要安装哪些功能，建议如下配置（空格：选中/ 取消）:
   
4. 选择 vue 的版本，目前先选择 2.x。
   
5. 选择 css 预处理器，目前只学过 Less，因此选择 Less 即可。
   
6. 选择第三方插件配置文件如何放置，默认选择第一项，各种文件配置信息独立放置。
   
7. 是否将此前是选择作为预设，方便以后不用每次都重复同样配置。
8. 项目成功创建完成。
   

分析一下 vue 项目下的 src 目录的构成

assets 文件夹：存放项目中用到的静态资源文件，例如：css 样式表、图片资源。

components 文件夹：存放封装的、可复用的组件。

main.js：项目的入口文件。整个项目的运行，要先执行 main.js。

App.vue： 项目的根组件。

 

vue 项目的运行流程

在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

1. App.vue 用来编写待渲染的 模板结构
2. index.html 中需要预留一个 el 区域
3. main.js 把 App.vue 渲染到了 index.html 所预留的区域

 

四、vue 组件

---

vue 中的组件化开发

组件化开发 指的是：根据封装的思想，把页面上 可重用的 UI 结构 封装为组件，从而方便项目的开发和维护。

vue 是一个 支持组件化开发 的前端框架。vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。

 

vue 组件的三个组成部分

每个 .vue 组件都由 3 部分构成，分别是：

• template：组件的模板结构
• script：组件的 JavaScript 行为
• style：组件的样式

 
1. template

vue 规定：每个组件对应的 模板结构，需要定义到