✔️Vue基础+

computed methods watch

computed计算属性

概念：基于 现有的数据，计算出来的 新属性。依赖的数据变化，自动重新计算。

语法：

1. 声明在 computed配置项中，一个计算属性对应一个函数
2. 使用起来和普通属性一样

• js中使用计算属性：this.计算属性
• 模板中使用计算属性：{{ 计算属性 }}

注意：

1. computed配置项和data配置项是 同级 的
2. computed中的计算属性 虽然是函数的写法，但它 依然是个属性
3. computed中的计算属性 不能 和data中的属性 同名
4. 使用computed中的计算属性和使用data中的属性是一样的写法
5. computed中计算属性内部的 this 依然 指向的是Vue实例

案例：

methods计算属性

作用：给Vue实例提供一个方法，调用以 处理业务逻辑

语法：

1. 写在methods配置项中
2. 作为方法调用
   • js中调用：this.方法名 ( )
   • 模板中调用 {{ 方法名() }} 或者 @事件名 = "方法名"

computed计算属性 VS methods方法

计算属性优势：

1. 缓存特性（提升性能）

• 计算属性会对计算出来的结果缓存，再次使用直接读取缓存

依赖项变化了，会自动重新计算 ——> 并再次缓存

• methods没有缓存特性

2. 当一个结果依赖其他多个值时，推荐使用计算属性
3. 当处理业务逻辑时，推荐使用methods方法，比如事件的处理函数

计算属性的完整写法

既然计算属性也是属性，能访问，应该也能修改了？

1. 计算属性默认的简写，只能读取访问，不能 “修改”
2. 如果要 “修改” → 需要写计算属性的完整写法

完整写法代码演示

 <div id="app">
    姓：<input type="text" v-model="firstName"> +
    名：<input type="text" v-model="lastName"> =
    <span></span><br><br> 
    <button>改名卡</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
 		firstName: '刘',
        lastName: '备'
      },
      computed: {

      },
      methods: {

      }
    })
  </script>

watch侦听器（监视器）

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

语法：

1. watch同样声明在跟data同级的配置项中

2. 简单写法：简单类型数据直接监视

3. 完整写法：添加额外配置项

data: { 
  words: '苹果',
  obj: {
    words: '苹果'
  }
},

watch: {
  // 该方法会在数据变化时，触发执行
  数据属性名 (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  },
  '对象.属性名' (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  }
}

watch侦听器

语法：

完整写法 ——> 添加额外的配置项

1. deep.true对复杂类型进行深度监听

2. immdiate.true 初始化 立刻执行一次

   data: {
     obj: {
       words: '苹果',
       lang: 'italy'
     },
   },
   
   watch: {// watch 完整写法
     对象: {
       deep: true, // 深度监视
       immdiate:true,//立即执行handler函数
       handler (newValue) {
         console.log(newValue)
       }
     }
   }
   

   两种写法：

   1.简单写法

   watch: {
     数据属性名 (newValue, oldValue) {
       一些业务逻辑 或 异步操作。 
     },
     '对象.属性名' (newValue, oldValue) {
       一些业务逻辑 或 异步操作。 
     }
   }
   

   2.完整写法

   watch: {// watch 完整写法
     数据属性名: {
       deep: true, // 深度监视(针对复杂类型)
       immediate: true, // 是否立刻执行一次handler
       handler (newValue) {
         console.log(newValue)
       }
     }
   }
   

Vue生命周期

Vue生命周期：就是一个Vue实例从创建 到 销毁 的整个过程。

生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

1.创建阶段：创建响应式数据

2.挂载阶段：渲染模板

3.更新阶段：修改数据，更新视图

4.销毁阶段：销毁Vue实例

Vue生命周期钩子

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

<div id="app">
    <h3>{{ title }}</h3>
    <div>
      <button @click="count--">-</button>
      <span>{{ count }}</span>
      <button @click="count++">+</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
        title: '计数器'
      },
      // 1. 创建阶段（准备数据）
     

      // 2. 挂载阶段（渲染模板）
      

      // 3. 更新阶段(修改数据 → 更新视图)
      

      // 4. 卸载阶段
     
    })
  </script>

工程化开发和脚手架

开发Vue两方式

• 核心包传统开发模式：基于html / css / js 文件，直接引入核心包，开发 Vue。
• 工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue。

工程化开发模式优点：

提高编码效率，比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等

工程化开发模式问题：

• webpack配置不简单
• 雷同的基础配置
• 缺乏统一的标准

为了解决以上问题，所以我们需要一个工具，生成标准化的配置

脚手架Vue CLI

Vue CLI 是Vue官方提供的一个全局命令工具

可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】

好处：

1. 开箱即用，零配置
2. 内置babel等工具
3. 标准化的webpack配置

使用步骤：

1. 全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g
2. 查看vue/cli版本： vue --version
3. 创建项目架子：vue create project-name(项目名不能使用中文)
4. 启动项目：yarn serve 或者 npm run serve(命令不固定，找package.json)

项目目录介绍和运行流程

项目目录

虽然脚手架中的文件有很多，目前咱们只需认识三个文件即可

1. main.js 入口文件
2. App.vue App根组件
3. index.html 模板文件

运行流程

组件化开发

组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。

​ 好处：便于维护，利于复用 → 提升开发效率。

​ 组件分类：普通组件、根组件。

​ 比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难易维护。咱们可以按模块进行组件划分

根组件

整个应用最上层的组件，包裹所有普通小组件

组件构成

• 语法高亮插件

• 三部分构成

  • template：结构 （有且只能一个根元素）
  • script: js逻辑
  • style： 样式 (可支持less，需要装包)

• 让组件支持less

  （1） style标签，lang=“less” 开启less功能

  （2） 装包: yarn add less less-loader -D 或者npm i less less-loader -D

普通组件注册

局部注册

特点：只能在注册的组件内使用

步骤：

1. 创建.vue文件（三个组成部分）
2. 在使用的组件内先导入再注册，最后使用

使用方式：当成html标签使用即可 <组件名></组件名>

注：组件名规范 —> 大驼峰命名法， 如 HmHeader

语法：

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'

export default {  // 局部注册
  components: {
   '组件名': 组件对象,
    HmHeader:HmHeaer,
    HmHeader
  }
}

全局注册

特点：全局注册的组件，在项目的任何组件中都能使用

步骤：

1. 创建.vue组件（三个组成部分）
2. main.js中进行全局注册

使用方式：

当成HTML标签直接使用

<组件名></组件名>

注：组件名规范 —> 大驼峰命名法， 如 HmHeader

语法：Vue.component(‘组件名’, 组件对象)

例：

// 导入需要全局注册的组件
import HmButton from './components/HmButton'
Vue.component('HmButton', HmButton)

scoped解决样式冲突

默认情况：写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。

1. 全局样式: 默认组件中的样式会作用到全局，任何一个组件中都会受到此样式的影响
2. 局部样式: 可以给组件加上scoped 属性,可以让样式只作用于当前组件

scoped原理

1. 当前组件内标签都被添加data-v-hash值 的属性
2. css选择器都被添加 [data-v-hash值] 的属性选择器

最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到

data必须是一个函数

• 一个组件的 data 选项必须是一个函数。目的是为了：保证每个组件实例，维护独立的一份数据对象。

• 每次创建新的组件实例，都会新执行一次data 函数，得到一个新对象。

如果 data 是一个对象，那么复用的组件实例，将会共享同一个 data 对象。这意味着，在一个组件实例中修改了 data 的某个属性，所有其他复用的组件实例中的这个属性也会被修改，

因为，它们实际上是在操作同一个对象，这显然不是我们想要的结果，因为每个组件实例都应该有自己的独立状态。

通过将 data 定义为函数，确保每次复用组件时，都会调用这个函数来创建一个新的 data 对象，这样，每个组件实例都会有自己独立的 data 对象，从而避免了状态共享的问题。

vx💌VueMaker