Vue数据监听的原理
vue的核心功能就是数据有了变化后，将会及时更新UI。 到底如何实现的修改变量或对象的属性后，UI可以及时更新？
-
vue2中使用Object.defineProperties()监听对象属性的变化。需要为每一个对象/每一个属性都添加监听器，性能堪忧。
-
vue3中使用new Proxy()为对象请一个代理对象，一个代理对象可以管理一整个对象，减少了属性监听器的创建，优化性能。需要程序员手动的为需要添加监听的值或对象创建代理：ref()reactive()toRefs()。
Vue2源码简单实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue2_dom.html</title>
</head>
<body>
<h1 id="h1">1</h1>
<button onclick="add()">点击后数字++</button>
<script>
// 模拟vue2的data中数据的声明语法，通过num来控制页面显示
var data = { num : 1 }
// vue2的方式，监听data对象，一旦data对象中属性变化，更新UI
Object.defineProperties(data, {
_num: {value:1, writable:true},
num: {
// 如果访问num属性：将执行get方法
get(){ return this._num },
// 如果修改num属性值：将执行set方法
set(value){ //data.num=5 value就是5
this._num = value
// vue需要找到页面中所有使用了该变量的地方
// 在此做DOM操作更新UI
h1.innerHTML = value
}
}
})
function add(){
// 避免操作DOM 直接修改data.num属性 实时更新UI
data.num++
}
</script>
</body>
</html>
Vue3简单实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue_dom.html</title>
</head>
<body>
Vue3:
<h2 id="h2">10</h2>
<button onclick="addv3()">点击后数字++</button>
<script>
// ---------------------------------------------------
// 模拟vue3的data中数据声明语法，通过count来控制页面显示
var v3data = { count:10 }
// ES6新特性提供了Proxy方便的创建对象的代理对象
// 这时如果需要对对象进行数据操作（访问属性、修改属性等）
// 那么就可以直接操作代理对象，代理对象在完成本职任务的过程
// 中，还可以让程序要在数据操作的间隙偷摸干点xxxx事情
var v3dataProxy = new Proxy(v3data, {
// 当用户设置v3data属性时，自动调用
set(obj, key, value){
//参数1：当前代理的目标对象
//参数2：要赋值的属性名
//参数3：为属性赋的值
obj[key] = value //先做本职工作 为目标对象属性赋值
h2.innerHTML = value
},
// 当用户访问v3data属性时，自动调用
get(obj, key){
return obj[key]
}
})
function addv3(){
v3dataProxy.count++
}
</script>
</body>
</html>
计算属性
vue2:
<span>{{total}}</span>
export default {
data(){
return {
price: 15.5,
num: 5
}
}
computed:{
total(){
return this.price * this.num
}
}
}
vue3:
<div>商品单价：{{price}}</div>
<div>
商品数量：
<button @click="count--">-</button>
{{count}}
<button @click="count++">+</button>
</div>
<div>商品总价：{{total}}</div>
setup () {
let price = ref(15.5)
let count = ref(5)
let total = computed(()=>{
return price.value * count.value
})
return {price, count, total}
}
监听器
vue2:
<input v-model="name">
export default {
data(){
return {
name: ''
}
},
watch:{ // 监听器，可以监听data中的变量的变化，一旦有变化则执行watch代码
// 声明方法监听变量， 方法名就是要监听的变量名
name(newName, oldName){
// 假设name 从 123 变为了 1234
// newName：1234 oldName：123
}
}
}
vue3：
setup () {
let phone = ref('')
// 监听phone变量的变化
watch(phone, (newValue, oldValue)=>{
console.log(`${oldValue} -> ${newValue}`)
})
return {phone}
}
方法
vue2:
<button @click="doClick">按钮</button>
export default {
methods: {
doClick(){ // 声明方法，处理按钮的点击事件
}
}
}
vue3：
setup () {
let doClick = ()=>{
}
let minus = ()=>{
}
return {
minus,
doClick
}
}
vue3.2提供的setup语法糖
在了解了vue3中动态数据的绑定语法、方法声明语法、计算属性等语法后，发现几乎所有的代码需要在setup方法内部编写，需要导出的变量写在return中即可。vue3.2提供的setup语法糖简化语法：
<script setup lang="ts">
// 在此处编写的代码，相当于在setup方法中编写的代码
// 在此处声明的变量都会自动导出，在template直接使用
import { reactive } from 'vue'
const movie = reactive({
title:'功夫之王',
actors: ['亮亮', '小新']
})
// 普通变量虽然页面中可以使用，但是并没有实现数据响应式
const a = 100
// 声明方法
const next = ()=>{
movie.title = '熊出没6'
}
</script>
组合式API致力于将同一个逻辑所需要的用到的变量、方法写在同一个位置，并不是像vue2选项式API一样，写写data、写写methods、写写mounted（跳着写）。更有利后后期查阅代码。
vue3中axios的使用
如果需要在项目中使用axios发送http请求，步骤如下：
-
安装
axiosnpm install axios -S -
在需要的时候，引入
axios，调用axios的方法发送请求：import axios from 'axios' axios.get() axios.post()
百慕大影城前台移动端项目实践
项目介绍：该项目供普通用户使用，提供了查询不同类别的电影列表、查看电影详情、查询电影院列表、查询电影院中放映厅列表、选择放映厅后选座、下订单等功能。
技术选型：Vue3、Typescript、VueRouter、Vuex、Vant组件库等。
项目初始化
-
新建一个脚手架项目。
bmdstudios-mobile-clientvue create bmdstudios-mobile-client依次选择：
Manually select features # 选中以下5项 - Babel - TypeScript - Router - Vuex - CSS Pre-processors # 选择3.x 3.x # 一路回车即可安装模块：
cd bmdstudios-mobile-client npm i axios -S启动脚手架web服务：
npm run serve
在项目中引入Vant组件库。
注意：安装node16 稳定版本。重装后，关闭所有终端
http://nodejs.cn/download/ 下载node
https://vant-ui.github.io/vant/#/zh-CN vant的官方文档
-
在项目根目录下安装
vant组件库。并且安装自动引入组件的插件库：npm i vant -S npm i unplugin-vue-components -D -
配置插件：
如果是基于
vue-cli的项目，在vue.config.js文件中配置插件：const { VantResolver } = require('unplugin-vue-components/resolvers'); const ComponentsPlugin = require('unplugin-vue-components/webpack'); module.exports = { configureWebpack: { plugins: [ ComponentsPlugin({ resolvers: [VantResolver()], }), ], }, }; -
在
vue组件中，使用vant组件即可。<template> <van-button type="primary" /> </template>
搭建项目的初始布局结构
设计嵌套路由：
访问：/home时，看到首页HomeView.vue，包含：<router-view/> 与 底部选项卡。
访问：/home/index时，看到首页上半部分占位符中显示Index.vue
访问：/home/video时，看到首页上半部分占位符中显示Video.vue
访问：/home/show时，看到首页上半部分占位符中显示Show.vue
访问：/home/me时，看到首页上半部分占位符中显示Me.vue
922
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
