Une brève analyse des écouteurs de surveillance, des propriétés calculées, de Vue-cli et des composants dans Vue

Le code est démontré comme suit :axios发起Ajax请求，检测当前输入的用户名是否可用：

代码演示如下：

watch: { // 监听 username 值的变化 async username( newVal ) { if (newVal === '') return // 使用 axios 发起请求，判断用户名是否可用 const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal) console.log(res) } }

（3）immediate 选项

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

代码演示如下：

watch: { username: { // handler 是固定写法，表示当 username 的值变化时，自动调用 handler 处理函数 handler: async function ( newVal ) { if (newVal === '') return const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal) console.log(res) }, // 表示页面初次渲染好之后，就立即触发当前的 watch 侦听器 immediate: true } }

（4）deep 选项

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

代码演示如下：

（5）监听对象单个属性的变化

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

代码演示如下：

二、计算属性

（1）什么是计算属性

1️⃣ 计算属性指的是通过一系列运算之后，最终得到一个属性值。

2️⃣这个动态计算出来的属性值可以被模板结构或 methods 方法使用。

代码演示如下：

（2）计算属性的特点

1️⃣ 虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性；

2️⃣ 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算；

三、vue-cli

（1）什么是 vue-cli

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

2️⃣ 引用自 vue-cli 官网上的一句话：程序员可以专注在撰写应用上，而不必花好几天去纠结 webpack 配置的问题；

3️⃣ 中文官网：https://cli.vuejs.org/zh/

（2）安装和使用

1️⃣ vue-cli 是 npm 上的一个全局包，使用 npm install 命令，即可方便的把它安装到自己的电脑上：npm install -g @vue/cli

2️⃣ 检查其版本是否正确：vue --version

3️⃣ 在终端下运行如下的命令，创建指定名称的项目：vue create 项目的名称

（3）vue 项目中 src 目录的构成

• assets 文件夹：存放项目中用到的静态资源文件，例如：css 样式表、图片资源；
• components 文件夹：程序员封装的、可复用的组件，都要放到 components 目录下；
• main.js是项目的入口文件。整个项目的运行，要先执行 main.js；
• App.vuerrreee

Par défaut, après le premier chargement du composant, l'écouteur de la montre ne sera pas appelé.

Si vous souhaitez que l'auditeurwatchsoit appelé immédiatement

• dossier assets: stocker les fichiers de ressources statiques utilisés dans le projet, tels que : les feuilles de style CSS, les ressources d'images ;
• dossier des composants: les composants réutilisables emballés par les programmeurs doivent être placés dans le répertoire des composants
• main. jsest le fichier d'entrée du projet. Pour exécuter l'intégralité du projet, main.js doit être exécuté en premier ;
• App.vueest le composant racine du projet (4) Le processus en cours d'exécution du projet vue ; En ingénierie Dans le projet, ce que vue doit faire est très simple : rendre App.vue dans la zone désignée de index.html via main.js.
  • App.vueest utilisé pour écrire la structure du modèle à rendre
  App.vue用来编写待渲染的模板结构；
• index.html中需要预留一个 el 区域；
• main.js把App.vue渲染到了index.html所预留的区域中；

四、vue 组件

（1）什么是组件化开发

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

（2）vue 中的组件化开发

1️⃣ vue 是一个支持组件化开发的前端框架；

2️⃣ vue 中规定：组件的后缀名是.vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件；

（3）vue 组件的三个组成部分

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

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

其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。

3.1 template

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