vue前端实现组织架构 前端架构图开发vue

文章目录

• VUE 基础

• MVVM设计
• VUE绑定原理设计
• 虚拟DOM树分析
• VUE编程步骤实践
• 绑定与指令应用
• 绑定样式分析(了解):
• 计算属性应用实践
• 生命周期函数应用

• Axios方式的Ajax请求

• Get请求
• Post请求

• VUE 组件化开发

• 组件设计
• 基本步骤
• 运行分析
• 组件类型
• 组件间传参

• 单页应用实践(SPA)

• 基本步骤
• 页头等全局组件：
• 路由跳转
• 路由传参

• 安装vue脚手架

• 脚手架文件夹结构:

• 懒加载应用实践

• 异步延迟加载:
• 彻底懒加载:

• http-proxy方式跨域:

• vue.config.js设置
• main.js
• 避免组件间样式冲突
• watch+事件修饰符+防抖:
• 插槽技术应用

• Vuex 数据管理

• 应用场景
• 构成分析(3部分)
• 组件中使用state中的变量
• 组件中修改state中的变量值
• 组件中先发ajax请求再修改state中变量值

• TypeScript 基本语法

• 变量:
• 函数:
• class 新规定
• 模块化开发:

• Vue3 新特性介绍

• 原理
• ES6 Proxy代理对象:
• main.ts 中实践
• 页面/组件
• 新声明周期钩子函数

• 总结(Summary)

VUE 基础

MVVM设计

MVVM: 界面View+模型Model+视图模型ViewModel

VUE绑定原理设计

访问器属性+虚拟DOM树
变量被修改时: 访问器属性发出通知，虚拟DOM树扫描并仅更新受影响的元素

虚拟DOM树分析

虚拟DOM树优点:
(1). 小: 只包含可能变化的元素。
(2). 遍历查找快
(3). 修改效率高: 只修改受影响的元素。
(4). 避免重复编码: 已封装DOM增删改查代码

VUE编程步骤实践

Vue功能3步:
(1). 先创建增强版的界面:
a. 整个界面必须包含在一个唯一的父元素下:
通常是

b. 可能变化的元素内容用{{自定义变量名}}标记
c. 触发事件的元素用@click="自定义处理函数名"标记
(2). 再创建new Vue()对象,其中el:指向new Vue()要监控的页面区域
(3). 在new Vue()对象内定义模型对象data和methods
a.界面所需的所有变量都放在data中
b.界面所需的所有事件处理函数都放在methods中

绑定与指令应用

(1). 如果元素的内容需要随变量自动变化: {{}}
(2). 如果元素的属性值需要随变量自动变化: :
(3). 控制一个元素显示隐藏: v-show //使用display:none隐藏元素
(4). 控制两个元素二选一显示: v-if v-else //使用删除元素方式隐藏元素
(5). 多个元素多选一显示: v-if v-else-if v-else
(6). 只要反复生成多个相同结构的元素组成列表时: v-for :key=“唯一标识”
强调: 为什么必须加:key=“i”？给每个元素副本添加唯一标识。修改数组中某个元素值时，避免重建整个列表，只需要修改一个DOM元素副本即可！提高修改效率。
(7). 只要绑定事件: @ $event
(8). 防止用户短暂看到{{}}: v-cloak和v-text
(9). 只要绑定原始HTML代码片段内容: v-html
(10). 如果元素的内容只在首次加载时绑定一次，之后都不会改变: v-once
优化: 减少虚拟DOM树中元素个数。
(11). 保护内容中的{{}}不被编译: v-pre
(12). 今后只要想获得表单元素的值或状态: v-model

绑定样式分析(了解):

(1). 需要精确修改某一个css属性，就绑定style:
a. <元素 style=“固定样式” :style="{css属性:变量名, …}"

data:{
   变量名:css属性值
	... : ...
}

b. <元素 style=“固定样式” :style=“变量名”

data:{
   变量名:{
	css属性名: 属性值,
	... : ...
   }
  }

(2). 只要批量修改一个元素的多个css属性就绑定class
a. <元素 class=“固定class” :class="{class名:变量名, …}"

data:{
   变量名:true或false,
   ... : ...
}

b. <元素 class=“固定class” :class=“变量名”

data:{
      变量名:{
	    class名:true或false,
    ... : ...
   }
}

计算属性应用实践

今后只要根据其他变量的值动态计算出一个属性值就用计算属性:
<元素>{{计算属性}}</元素>

new Vue({
  el:"#app",
  data:{...},
  methods:{...},
  computed:{
    计算属性名(){
      计算过程
      return 计算结果
    }
  }
})

生命周期函数应用

vue生命周期4个阶段 8个钩子函数
(1). 创建(create)

created(){ ... }
beforeMount(){ ... }

(2). 挂载(mount)

mounted(){ ... 经常在这里发送ajax请求 ... }
beforeUpdate(){ ... }

(3). 更新(update)

updated(){ ... }
beforeDestroy(){ ... }

(4). 销毁(destroy)

destroyed(){ ... }

Axios方式的Ajax请求

只要在vue中发送ajax请求，就用axios
axios.defaults.baseURL=“服务器端接口的公共基础地址部分”

Get请求

GET请求：

axios.get(
  "服务器端接口地址的相对路径",
  {
    params:{ 参数名: 参数值, ...  }
  }
).then(result=>{
  ... result.data...
})

Post请求

POST请求：

axios.post(
  "服务器端接口地址的相对路径",
  "参数名1=参数值1&参数名2=参数值2&..."
).then(result=>{
  ... result.data...
})

强调: 在vue内使用axios，then中必须用箭头函数，保持then内this与外部this一致，都指向当前new Vue()对象

VUE 组件化开发

组件设计

只要希望重用一块独立的功能区域就用组件:
(1). 定义组件
Vue.component(组件标签名,{
template:HTML内容片段,
data(){ return { 变量 } },
//其余和new Vue()完全相同
})
(2). 在HTML中使用自定义组件
<组件标签名/>或双标记也行
(3). 原理: new Vue()扫描到自定义组件标签，
a.组件的template中的HTML内容代替页面中<组件标签>位置。
b. 并为这个小区域专门创建一个缩微版的vue类型对象。
1). 调用组件的data()函数为当前组件副本创建一个专属数据对象副本。
2). 引入组件对象中的methods等其他内容到当前组件对象副本中

基本步骤

a. 拿到页面先划分功能区域
1). 从上到下，按功能不同划分区域
2). 按是否重用划分
b. 为每个组件创建独立的.js文件，其中包含一个组件对象及其内容
c. 将所有组件引入唯一完整的html页面中，并在

中添加父组件标签。

运行分析

a. new Vue()扫描

，发现父组件标签，创建并替换父组件
b. 父组件扫描自己内部的template内容，创建并替换子组件

组件类型

a. 根组件: new Vue()
b. 全局组件: Vue.component(…)
c. 子组件: 3步
1). var 子组件对象名={
内容必须符合组件的要求
}
子组件对象名必须是驼峰命名
2). 父组件对象中:{
… …
components{ 子组件对象名, … ,… }
}
子组件对象名必须是驼峰命名
3). 父组件template中用<子组件标签名/>引入子组件内容
components会将子组件对象名的驼峰命名自动翻译为-分隔
所以, 使用子组件标签时，要用-分隔多个单词

组件间传参

a. 父组件给子组件
<子组件 :自定义属性名=“父组件变量”>
b. 子组件取:
props:[“自定义属性名”]
结果: 在子组件内，props中的"自定义属性名"与子组件自己data中的变量用法完全相同！

单页应用实践(SPA)

基本步骤

第一步： 先创建唯一完整的HTML页面

1). 包含vue基本的页面结构

<div id="app"> new Vue({el:"#app"})

2). 引入所有必要的文件和组件

vue-router.js, 其它页面或组件文件, router.js路由器对象所在文件

3).

中用为今后页面组件预留空位。

第二步： 再为每个页面组件创建独立的文件。每个页面组件其实都是一个子组件

第三步： 创建router.js文件，例如：

1）创建路由字典对象

var routes=[
    {path:"/", component:首页组件对象名},
    {path:"/相对路径" , component: 其它页面组件对象名},
    {path:"*", component: 404页面组件对象 }
  ]

2). 创建路由器对象，并将路由字典对象转入路由器对象中

var router=new VueRouter({ routes })

3). 将router对象加入到new Vue()中

new Vue({ el:"#app", router })

页头等全局组件：

a. 创建独立的文件保存页头组件的内容
b. 使用Vue.component(“my-header”,{ … })将页头创建为全局组件
c. 在唯一完整的HTML页面中引入页头组件文件
d. 使用页头组件标签: 2种:
1). 如果所有页面都有统一的页头:
就放在唯一完整的html页面中外部上方
2). 如果有的页面有页头，有的页面没有页头:
就只放在需要页头的组件中的template中

路由跳转

a. html中: 文本
b. js中: this.$router.push("/相对路径")

路由传参

a. 修改路由字典:

{path:"/相对路径/:自定义参数名", component:页面组件对象, props:true}

b. 跳转时:

<router-link to="/相对路径/参数值"
  或
  this.$router.push("/相对路径/参数值")

c. 下一个页面接:

1). props:[ '自定义参数名' ]
 2). 可将"自定义参数名"用作绑定或程序中都行

安装vue脚手架

(1). 设置npm默认使用国内淘宝镜像仓库:

npm config set registry http://registry.npm.taobao.org
  备选: npm i -g cnpm --registry=http://registry.npm.taobao.org

(2). 安装可反复生成项目脚手架代码的工具:

npm  i   -g  @vue/cli
  备选: cnpm i -g @vue/cli

(3). 启动vue脚手架项目

npm run serve

(4). 打开浏览器，地址栏输入:

http://localhost:8080

脚手架文件夹结构:

(1). 唯一完整的HTML页面: 一分为三:

a. public文件夹
1). 图片img文件夹放在public文件夹下
2). 第三方css的压缩版和第三方js的压缩版都放在public文件夹下
3). 唯一完整的HTML文件index.html中，head中引入第三方的css和js

b. src/App.vue
1). 下只包含公共的页头组件和
2).

1). import引入App.vue，router，axios，以及其他全局组件
2). 将全局组件对象转为真正的全局组件: Vue.component( “组件标签名”, 全局组件对象 )
3). 配置axios并放入原型对象中:
axios.defaults.baseURL=“服务器端基础路径”
Vue.prototype.axios=axios;

(2). 为每个页面创建.vue组件文件，都放在src/views文件夹下。每个.vue文件中:

a. 标签内，包含这个页面的HTML内容
b. 中的js内容，和前四天将的是完全一样的写法，绑定，指令，函数，生命周期，axios请求等都一样。前四天怎么用，这里就怎么用。

(3). 路由字典和路由器对象，在src/router/index.js文件中

a. 仅import首页组件对象，不要过早引入其它页面组件
b. 路由字典中首页组件: { path:"/", component:首页组件对象}
c. 其余页面组件都做成懒加载:
{
path: ‘/相对路径’,
component: () => import(/* webpackChunkName: “组件名” */ ‘…/views/其它页面组件.vue’)
}

(4). 全局组件都放在src/components文件夹下，每个全局组件.vue文件中。

全局组件必须在main.js引入，并用Vue.component()转化,为真正的全局组件，才能在其它组件的HTML中使用。

(5). 运行时, 路由器router对象监视浏览器地址栏路径变化，

查找对应的页面组件内容，先代替App.vue中的，然后main.js再将包含要加载的页面内容的App.vue组件内容，替换到唯一完整的index.html中空

位置。

懒加载应用实践

异步延迟加载:

src/router/index.js
//不要import Details from "../views/Details"
const routes=[
  ...
  {
    path:"/details/:lid",
	component: () => import(
		/* webpackChunkName: "details" */ 
		'../views/Details.vue'
	),
    props:true
]

彻底懒加载:

项目根目录创建vue.config.js

module.exports={
  chainWebpack:config=>{
    config.plugins.delete("prefetch")
    //删除index.html开头的带有prefetch属性的link，不要异步下载暂时不需要的页面组件文件
  },
}

http-proxy方式跨域:

vue.config.js设置

module.exports={
  ... ,
  devServer: {
    proxy: {
      '/': {
        target: `服务器端接口地址公共基础路径`,
        changeOrigin: true
      }
    }
  }
}

main.js

axios.defaults.baseURL="服务器端公共基础路径"

(3).引用 this.axios.get(“/接口地址相对路径”).then(result=>{…})

避免组件间样式冲突

(1)方案1

<style scoped>

(2)方案2

<template>
   <组件父元素 class="组件名">
  </template>
  <style>
   .组件名>子元素选择器{ ... }
  </style>

watch+事件修饰符+防抖:

(1). 希望变量一变化就自动执行一项操作时:

data(){
     return { 变量: 值 }
  },
watch:{
    变量(){
        要执行的操作
}
}

(2). 事件修饰符:

@事件.13 按回车时才执行
@事件.stop 阻止冒泡
@事件.prevent 阻止默认行为

(3). 防抖:

data(){
  return {
    ... ,
    timer:null
  }
},
methods:{
  查找方法(){
    if(this.timer!=null){
      clearTimeout(this.timer)
    }
    this.timer=setTimeout(()=>{
      正式的查找操作
    },等待时间)
  }
}

插槽技术应用

(1). 只要多个组件拥有相同的结构，只是局部的内容不同，都可用插槽实现
(2). 如何:
a. 先额外创建一个带插槽的外壳组件,保存其它多个组件相同部分的HTML+CSS+JS。但是，外壳组件中将来可能变化的位置，用标记
b. 再定义其它使用外壳组件的组件:
1). 引入带插槽的外壳组件:

import 外壳组件名 from "./外壳组件.vue"
  export default {
    components:{ 外壳组件名 },
      ... 
  }

2). 在其它组件中:

<template>
    <外壳组件 :外壳组件所需属性="变量">
      <当前组件自有的个性化内容>
    </外壳组件>
  </template>

(3). 具名插槽:
a. 如果一个外壳组件中，多个部位将来都会被更换，就可用具名插槽
b. 如何:
1). 外壳组件中:

<template>
    ...公共部分...
    <slot name="插槽名1"></slot>
    ...公共部分...
    <slot name="插槽名2"></slot>
    ...公共部分...
  <template>

2). 其它使用外壳组件的组件:

<template>
    <外壳组件...>
      <template  #插槽名1>
        第一部分要更换的内容
      </template>
      ...
      <template #插槽名2>
        第二部分要更换的内容
      </template>
    </外壳组件>
  </template>

Vuex 数据管理

应用场景

今后只要多个组件都需要共用一批数据时，都可用vuex

构成分析(3部分)

state部分：

state:{ //保存共用的变量 
      变量:初始值,
	  ... : ...
    }

mutations部分：

mutations:{ //保存专门修改变量的方法 
	  set变量名(state, 新值){
		state.变量名=新值
	  }
	  ... 
	}

actions部分：

actions:{ //保存专门先发送ajax请求，再修改变量的方法 

  方法名(context, 发给服务器的参数值){
    axios.get或post(
	  "接口地址",
	  发给服务器端的参数值
	).then(result=>{
	  ...
	  context.commit("mutations中某个方法名", 新值)
	  ...
	})
}
}

组件中使用state中的变量

a. import { mapState } from “vuex”
b. export default {
computed:{
…mapState([ “state中某变量名”, … ]),
其它计算属性
}
}
c. 中可用state中某变量名用于绑定和指令
d. js中可this. state中某变量名来读取变量值

组件中修改state中的变量值

a. import { mapMutations } from “vuex”
b. export default {
methods:{
…mapMutations ([ “Mutations中某方法名”, … ]),
其它方法
}
}
c. js中可用this. Mutations中某方法名(实参值)修改state中变量值

组件中先发ajax请求再修改state中变量值

a. import { mapActions } from “vuex”
b. export default {
methods:{
…mapActions ([ “Actions中某方法名”, … ]),
其它方法
}
}
c. js中可用this. Actions中某方法名(实参值)发送ajax请求并修改state中变量值。

TypeScript 基本语法

变量:

var或let或const 变量名:数据类型=值;

函数:

(1).定义：

function 函数名(形参:数据类型, …):返回值类型{
… …
}

(2). 不确定参数个数:

a. 单个参数不确定有没有

function 函数名(形参1:数据类型, 形参2?:数据类型)...
或
function 函数名(形参1: 数据类型, 形参2:数据类型=默认值)...

b. 多个参数不确定有没有

function 函数名(形参1:数据类型, ...形参2:数据类型[])...

(3). 重载:
a. 先定义空的函数声明，列举所有重载的可能:

function 函数名():返回值类型;
function 函数名(形参1: 数据类型):返回值类型;
function 函数名(形参1: 数据类型, 形参2:数据类型):返回值类型;

b. 正式实现功能的函数:

function 函数名(){
      根据arguments中的元素个数，决定具体执行何种逻辑
    }

class 新规定

(1). class 类型名{ //必须提前声明属性，才能使用

属性1: 数据类型=初始值
    属性2: 数据类型=初始值
    ...
    //构造函数必须定义数据类型
    constructor(形参1:数据类型, 形参2:数据类型,...){
		this.属性1=形参1;
        this.属性2=形参2;
        ...
    }
    /*方法定义...*/
  }

(2). 访问修饰符: 今后，只要想控制一个class中属性的使用范围时。

class 父{
       public 公有属性:数据类型=值
       protected 受保护的属性:数据类型=值
       private 私有属性:数据类型=值
       父的函数(){
         以上三种属性都能用
       }
    }
    class 子 extends 父{
       子的函数(){
          只能用父的公有属性和父的受保护的属性
          不能用父的私有属性
       }
    }
    除父子class以外的程序区域： 
    只能用父class的对象的公有属性

(3). 接口: 保证开发人员按照要求实现类的成员
a. 先定义接口:

interface  I接口名{
  属性名:数据类型
  ...
  方法名(形参:数据类型, ...):返回值类型;
}

b. 定义class实现接口的要求:

class 类型名 implements  I接口名{
  属性名:数据类型=值
  ...
  方法名(形参:数据类型, ...):返回值类型{
    方法实现
  }
}

模块化开发:

(1). 模块中只抛出一个东西:

export default 一个东西
  import  别名  from "相对路径"

(2). 模块中同时抛出多个东西:

export { 多个东西用逗号分隔 }
  import { 想要的个别东西用逗号分隔 }  from  "相对路径"

Vue3 新特性介绍

原理

绑定原理:ES6 Proxy代理对象+虚拟DOM树

ES6 Proxy代理对象:

新生成的代理对象 = new Proxy(要保护或监视的原对象, { 
      //当有人试图获取数组中任何一个元素值时自动触发
      get(当前对象, 属性名) { 
        console.log(`有人试图读取arr对象的${属性名}成员`)
        return 当前对象[属性名];
      },
      //当有人试图修改数组中任何一个元素值时自动触发
     set(当前对象, 属性名, 新值) {
        console.log(`有人试图修改arr对象的${属性名}成员`)
        当前对象[属性名] = 新值;
        return true; //必须: 返回修改成功！
      }
  });

//今后，都使用新代理对象，代替使用原对象。但是用法上和使用普通对象完全一样！

main.ts 中实践

a. 默认:

createApp(App).use(store).use(router).mount('#app’)

b. 全局组件:

import 组件对象  from “组件文件相对路径”
var app= createApp(App);
app.component('组件标签名', 组件对象名)
app..use(store).use(router).mount('#app’)

c. 全局指令:

app.directive ("my-focus",{
	mounted(DOM元素){
			DOM操作
	}	
})

d. axios: //axios对象是单例模式，整个项目中只有一个axios对象，哪里使用都一样。
import axios from “axios”
axios.defaults.baseURL=”服务器端接口基础路径”
//单例模式，不用放到原型对象中，也能在任意组件内引用——Vue2也可以这样用。

页面/组件

a. 里和

import { defineComponent, ref, reactive, toRefs, watch, computed, onMounted } from 'vue’;
import axios  from “axios” //axios对象是单例模式，整个项目中只有一个axios对象，哪里使用都一样。
import 子组件对象   from “子组件相对路径”

export default defineComponent({
  components:{ 子组件对象 },
  directives:{
    “自定义指令名”:{
       mounted(DOM元素){
         DOM操作
       }
     }
  },
  setup(){ //
    const data=reactive({
      界面所需变量
    });
    //专门解构原始类型的变量
    let { 原始类型的变量, … } = toRefs(data);
	//专门解构引用类型的变量
    let {引用类型的变量, ...} = data;

    const methods={
      界面所需方法(){ … 使用data中变量，不用加this！但要加.value才能用 }
      计算属性：computed(()=>{ //vue3中没有过滤器了，计算属性兼顾过滤器职能
         //计算过程
         return 返回值
      })
    }

    watch(要监控的变量, ,(newVal, oldVal)=>{
		console.log(`变量变了，新值为${newVal}, 旧值为${oldVal}`)
		//变量变化时要执行的操作
	})

    //声明周期必须自己先import，再在setup内部调用！
    onMounted(){ //原mounted生命周期钩子函数
        //axios请求不用加this.
		axios.get(…).then(result=>{ … })
    }

	return {
		…toRefs(data.value),
        …methods
    }
  },
})

新声明周期钩子函数

beforeCreate -> setup()
  created -> setup()
  beforeMount -> onBeforeMount
  mounted -> onMounted
  beforeUpdate -> onBeforeUpdate
  updated -> onUpdated
  beforeDestroy -> onBeforeUnmount
  destroyed -> onUnmounted

总结(Summary)