【Vue 全家桶】1、Vue 核心

原创已于 2024-11-05 08:47:04 修改 · 611 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2024-10-25 14:14:39 首次发布

Vue 核心

Vue 简介

动态构建用户界面的渐进式 JavaScript 框架
特点：

借鉴 Angular 的模板和数据绑定技术
借鉴 React 的组件化和虚拟 DOM 技术

不推荐直接操作 DOM

1. 违反了数据驱动视图的原则
  Vue.js 和其他框架：这些框架的核心思想是数据驱动视图（Data-Driven View）。你通过修改数据来更新视图，而不是直接操作 DOM。这使得代码更加声明式和易于理解。
  一致性：当数据发生变化时，框架会自动更新视图，确保视图与数据保持一致。直接操作 DOM 可能会导致数据和视图不同步。
1. 复杂性和维护性
  代码可读性和可维护性：直接操作 DOM 的代码通常更难理解和维护。使用框架提供的模板语法和响应式系统可以使代码更简洁、更具可读性。
  组件化：框架鼓励将 UI 分解为独立的组件，每个组件有自己的状态和行为。直接操作 DOM 会使组件之间的关系变得混乱，难以管理和复用。
1. 性能优化
  虚拟 DOM：现代框架通常使用虚拟 DOM 来提高性能。虚拟 DOM 是一个轻量级的内存中表示，框架会在虚拟 DOM 和实际 DOM 之间进行高效的差异计算（diffing），只更新必要的部分。直接操作 DOM 可能会绕过这些优化机制。
  批量更新：框架可以在一次事件循环中批量处理多个 DOM 更新，减少重绘和回流的次数，从而提高性能。
1. 跨平台兼容性
  多平台支持：现代框架通常支持多平台开发，例如 Vue.js 可以用于 Web 和移动应用（如 Weex 或 NativeScript）。直接操作 DOM 的代码可能无法在这些平台上运行或需要大量修改。
1. 测试
  单元测试：直接操作 DOM 的代码通常更难进行单元测试。使用框架的数据驱动方式可以更容易地编写和维护测试代码。
  隔离性：框架提供了更好的隔离性，使得组件可以在没有实际 DOM 的环境中进行测试。
1. 社区和生态系统
  最佳实践：遵循框架的最佳实践可以让你从社区的经验中受益。大多数现代框架都有丰富的文档和社区支持，帮助你写出高质量的代码。
  工具和库：许多工具和库都是为这些框架设计的，直接操作 DOM 可能会使你无法充分利用这些资源。

模板语法

插值语法 {{}}

功能：用于解析标签体内容
语法：{{xxx}} ，xxxx 会作为 js 表达式解析

指令语法 v-

功能：解析标签属性、解析标签体内容、绑定事件
举例：v-bind:href = ‘xxxx’ ，xxxx 会作为 js 表达式被解析

数据绑定

单向数据绑定 v-bind

双向数据绑定 v-model

MVVM模型

M：模型(Model) ：对应 data 中的数据
V：视图(View) ：模板
VM：视图模型(ViewModel) ： Vue 实例对象

事件代理

在这里插入图片描述

Object.defineProperty(obj, prop, descriptor)

Object.defineProperty(person, 'age', {
	value: 18,
	enumerable: true, //控制属性是否可以枚举
	writable: true, //控制属性是否可以被修改
	configurable: true, //控制属性是否可以被删除
	
	// 读取属性时调用
	get: function(){
	}
	// 修改属性时调用
	set(value){
	}
})

数据代理：通过一个对象代理对另一个对象中属性的操作
vue中的数据代理：
vm-getter-data.name
vm-setter-data.name

数据处理 methods

showInfo($event, num)
new Vue({
	data: {} //数据代理，数据劫持
	methods:{
		showInfo(event, num){
		// this === vm
		}
	}
})

事件修饰符
@click.prevent:：阻止默认事件
.stop：阻止事件冒泡
.once：事件只触发一次
.capture：使用事件的捕获阶段
.self：只有event.target是当前操作的元素时才触发事件
@wheel.passive：事件的默认行为立即执行，无需等待事件回调执行完毕
键盘事件
keydown.tab：当用户按下键盘上的任意键时触发
keyup.enter：当用户释放键盘上的任意键时触发
按键别名config.keyCodes：enter, delete, esc, space, tab, up, down, left, right, caps-lock

计算属性与监视属性

计算属性 computed

new Vue({
	data: {
		firstName: '',
		lastName: ''
	} //数据代理，数据劫持
	computed:{
		// 完整写法
		fullName:{
			get(){ // 调用：初次读取；依赖数据变化
				return this.firstName + '-' + this.lastName
			},
			set(value){ // fullName被修改时
				const arr = value.split('-')
				this.firstName = arr[0]
				this.lastName = arr[1]
			}
		},
		// 简写
		fullName(){
		}
	}
})

计算属性：通过已有的属性计算得到
在vm中直接读取
缓存，调用：初次读取；依赖数据变化

监视属性 watch

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  // 一般写法
  watch: {
    user: {
      handler(newVal, oldVal) {
        console.log('User changed:', newVal, oldVal);
      }
    },
  },
  // 深度监视
  watch: {
    // 深度监视 user 对象
    user: {
      handler(newVal, oldVal) {
        console.log('User changed:', newVal, oldVal);
      },
      deep: true, // 开启深度监视
    },
  },
  // 简写
  watch: {
    message(newValue, oldValue) {
      console.log('New value:', newValue);
      console.log('Old value:', oldValue);
    }
  },
});

computed VS watch

主要区别
- 缓存 vs 无缓存
  计算属性：有缓存，只有当依赖的数据发生变化时才重新计算。
  监听器：没有缓存，每次数据变化时都会执行回调函数。
- 适用场景
  计算属性：适用于简单的、声明式的计算逻辑，特别是当计算结果仅依赖于其他数据且不需要执行副作用操作时。
  监听器：适用于需要执行复杂逻辑、异步操作或有副作用的操作时，例如发送网络请求、更新其他数据等。
- 只读 vs 可写
  计算属性：默认是只读的，但可以通过设置 get 和 set 方法使其可写。
  监听器：总是可写的，可以执行任意操作。
- computed可以做的，watch都可以做
何时使用
- 使用 computed：当你需要一个派生状态，并且这个状态可以直接从其他数据计算得出时。
- 使用 watch：当你需要在数据变化时执行一些副作用操作，或者需要处理复杂的逻辑时。
vue管理的函数：普通函数；不是vue管理的函数（回调函数等）：箭头函数

class 与 style 绑定

v-bind:class

用于动态地绑定 HTML 元素的 CSS 类，可以根据组件的状态或数据来控制元素的样式

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

// 对象写法
<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

// 数组写法
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

v-bind:style

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

// 对象写法
<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

// 数组写法
<div v-bind:style="[baseStyles, overridingStyles]"></div>

条件渲染 v-if/v-show

v-if

当条件为 true 时，元素会被渲染到 DOM 中；当条件为 false 时，元素不会被渲染，并且从 DOM 中完全移除

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-show

切换元素的 CSS property: display，元素始终存在于 DOM 中，只是通过 display: none 或 display: block 来控制其可见性

<h1 v-show="ok">Hello!</h1>

列表渲染 v-for

// 遍历数组
<li v-for="(p,index) in/of persons" :key="p.id">
	{{p.name}}-{{p.age}}
</li>

// 遍历对象
<li v-for="(val,k) in/of car" :key="k">
	{{k}}-{{val}}
</li>

// 遍历字符串
<li v-for="(char,index) in/of str" :key="index">
	{{char}}-{{index}}
</li>

// 遍历指定次数
<li v-for="(num,index) in/of 5" :key="index">
	{{num}}-{{index}}
</li>

new vue({
	el:'#root',
	data:{
		persons:[
			{id:'001', name:'A', age: 18},
			{id:'002', name:'B', age: 19},
			{id:'003', name:'C', age: 20},
		]
	}
})