常宁市网站建设设计师个人网站
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%”填进去
