vue学习day05-watch侦听器（监视器）、Vue生命周期和生命周期的四个阶段、、工程化开发和脚手架Vue cli

13、watch侦听器（监视器）

（1）作用：监视数据变化，执行一些业务逻辑或异步操作

（2）语法：

1）简写语法——简单数据类型，直接监视

①

Watch:{

数据属性名（newValue,oldValue）{

一些业务逻辑或异步操作

}，

‘对象·属性名’（newValue,oldValue）{

一些业务逻辑或异步操作

}

}

②示例：

结果：

2）完整写法——添加额外配置项

①deep:true对复杂类型深度监视

②immediate:true初始化立刻执行一次handler方法

14、Vue生命周期和生命周期的四个阶段

（1）Vue生命周期

        1）概念：

        一个Vue实例从创建到销毁的整个过程。

（2）生命周期的四个阶段（创建、挂载、更新、销毁）

        1）创建阶段：将数据变为响应式数据。执行一次。在数据转化完成后可以发送初始化渲染     请求

        2）挂载阶段：渲染模版。执行一次。挂载完后，可以进行dom操作。

        3）更新阶段：数据修改，视图更新。可以执行多次。

        4）销毁阶段：销毁实例。

（3）Vue生命周期函数（钩子函数）

Vue生命周期过程中，会自动运行一些函数，被称为生命周期钩子，让开发者可以在特定的阶段运行自己的代码

        1）创建阶段：

                ①beforeCreate

                ②created：发送初始化渲染请求

        2）挂载阶段

                ①beforeMount

                ②mounted：操作dom

        3）更新阶段

                ①beforeUpdate

                ②updated

        4）销毁阶段

                ①before Destroy：释放除Vue以外的资源（清除定时器，延时器……）

                ②destroyed

（4）示例

代码：

结果：

15、工程化开发和脚手架Vue cli

（1）开发Vue的两种方式

        1）核心包传统开发模式：基于html/css/js文件，直接引入核心包，开发Vue。

        2）工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue。

（2）概念

        Vue cli是Vue官方提供的一个全局命令工具，可以帮助我们快速创建一个标准化基础架子。（集成了webpack配置）

（3）好处

        1）开箱即用，0配置

        2）内置babel等工具

        3）标准化

（4）使用步骤

        1）全局安装（一次）：yarn global add @vue/cli 或npm i @vue/cli -g

        2）查看Vue版本vue –version

        3）创建项目架子：vue create project-name（项目名-不能用中文）

                ①新建一个文件夹，右键打开“终端”

                ②创建vue项目架子（vue create 项目名）

回车：

                ③选择Vue2

回车：

（创建，需等待）

创建成功（自动产生一个vue-demo1文件）：

（没产生，先刷新一下）

4）启动项目：yarn serve 或npm run serve（找package.json）

        ①进到创建的目录里，执行npm run serve

回车：

        ②在浏览器输入：“localhost:8080”，启动成功

（5）安装出现问题

如果已经安装或者安装了nvm，又或者初次安装，但是出现（vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的 名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一 次。 所在位置 行:1 字符: 1 + vue create vue-demo1 + ~~~     + Category）

（或者安装了nvm的），可以尝试一下这个方法

1）通过vue.cmd在你安装脚手架的那个盘查找（这里是D盘）vue-codemod.cmd文件，复制它的路径

2）按win键，打开“设置”，找到“高级系统设置”

3）打开“环境变量”，在“系统变量”里，新建一个“VUE”的变量，找到“Path”，新建一个，将“%VUE%”填进去