回顾Vue2---②_vue2回顾-优快云博客

本文介绍了Vue.js中的侦听器功能，用于监听数据变化并执行相应操作，例如在用户数据(user)改变时记录新旧值。同时，讲解了vue-cli的使用，它是Vue.js的标准开发工具，简化了webpack配置流程，包括如何安装、创建项目以及项目结构的基本原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

续上
三、
侦听器
这个功能用来侦听数据的变化，并以此做出对应的操作
example：

const vm = new Vue({
 el:'#app',
 data:{
 user:'',
 },
 watch:{
 user(newVal,oldVal){
 console.log(newVal,oldVal)
 }
 }
 })

newVal为user的修改后的新值，oldVal为旧值
要侦听哪个数据，函数名就为对应的数据名。

函数里加immdiate:true可以在视图渲染成功后马上触发一次侦听器（不设置的话默认初次加载页面时不会触发）

如果侦听的是个对象的话

data:{
array:{first:'1'},
},
watch:{
array:{
//handler为默认触发函数
handler(newVal){
console.log(newVal.first)
},
deep:true,
}
}

又或者直接把watch下面的array改成’array.first’，然后可以直接获取newVal

四、
vue-cli
这是Vue.js一个标准开发工具，能够简化webpack配置过程。
1.安装
npm install -g @vue/cli
2.创建项目
vue create 项目名称

在工程化项目中，主要就是通过main.js 将App.vue的内容渲染到index.html
App.vue用来编写待渲染的模板结构
index.html中预留el的位置
main.js负责将App.vue渲染到index.html