美文网首页
前端学习笔记—Vue2组件化

前端学习笔记—Vue2组件化

作者: 木溪bo | 来源:发表于2024-07-09 17:27 被阅读0次
大纲目录1
大纲目录2

一、定义

vm代表:new Vue()实例对象,vc代表:VueComponent实例对象
this的归属问题:在vue组件使用中,常规函数function(){}的this都是指向当前实例对象,如果是箭头函数()=>{},因为箭头函数是没有this的,会向外向上一层查找this;这一点在很多时候会用到这个定义,需要注意区别不同的使用场景

模块化:对js按功能来拆分,向外提供特定功能的js 程序,一般一个js文件就是一个js 模块。类似java的工具类。
组件化:用来实现局部(特定)功能效果的代码集合,通过对不同功能模块来拆分和封装。一个组件可包含html、css、js、资源文件等。和安卓组件化有点区别,安卓的组件化,每个组件可单独运行。前端组件类似于安卓自定义控件。当然前端也有自己的微前端功能。

image.png
  • 传统多页面开发


    image.png
  • 组件化开发


    image.png
  • 非单文件组件:一个html文件中的js注册包含有n个组件。


    image.png
  • 单文件组件(SFC,Single File Component):一个html文件只包含一个.vue父组件,每个子组件定义在这个 .vue 文件中。每个子组件.vue文件中包含了模板、脚本和样式三个部分。这种方式将一个组件的所有定义集中在一个文件中,提高了开发效率和代码的可维护性。

  • 组件中的data必须是一个带返回值的函数

  • 组件中的template对象内的内容必须要包含一个根元素

  • 记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生

二、非单文件组件:不常用

  • 创建和使用
image.png 简单创建和注册流程 非单文件组件,html中的js注册多个组件 全局注册 局部注册 image.png
  • VueComponent对象

组件的实例对象本质是VueComponent对象。每调用一次Vue.extend()创建一个组件就对应创建一个新的VueComponent构造函数(注意不是创建了实例,是类,只有new 才能创建新实例)。VueComponent对象也是通过数据代理方式实现的,里面也会有_data()对象、setter()和getter()函数等。
编写一个组件<ChildView/>标签也即只有<body> <ChildView/> </body>真正使用了后才是真正创建了一个组件实例对象。框架内部会直接帮我们new了一个实例对象,创建一个新的VueComponent实例对象,脚手架中只是省略了显示书写。

VueComponent对象与Vue对象的元素差异:
1.VueComponent对象el默认是组件布局根元素,且不需要自己写el设置;根Vue的el元素是模版id容器
2.VueComponent对象data必须是函数,根Vue的data元素是可以是函数也可以是对象
3.因为组件是可复用的 vue 实例,所以它们与new Vue()是接收相同的选项,实例的属性内容几乎相同。例如computed、watch 、methods,以及生命周期钩子等

image.png
原型属性:显式原型属性prototype(函数或类拥有),隐式原型属性_ _proto_ _(实例对象拥有)
实例的隐式原型属性_ _proto_ _永远指向自己的缔造者。弱一级的原型对象可以一直往上追溯到父一级的原型对象prototype,可以调用父级原型对象prototype中的函数和属性。
如:往Vue原型对象添加一个myX属性
    Vue.prototype.myX=886
    //原始方式创建
    const student1 = Vue.extend({
        template: `
            <div>
                <div>姓名:<input type="text" v-model="userinfo.name"></div>
                <div>年龄:<input type="text" v-model="userinfo.age"></div>
            </div>`,
        data: function () {
            return {
                userinfo: {
                    name: '王林',
                    age: 18,
                }
            }
        },
        methods:{
            showMy(){
                //这里可以直接通过组件VueComponent访问到myX
                console.log('showMy:'+this.myX)
            }
        }
    })
原型对象属性图
原型对象明细

三、单文件组件:比较常用

  • 简单描述

用脚手架Vue-Cli创建的Vue项目,这个Vue项目只有一个index.html页面,其他页面都是.vue格式的组件。单文件组件特点是页面都是.vue格式的文件组成。

  • 搭建Vue2脚手架:Vue-CLI(vue command line interface)

该方式创建的是单文件组件


node和npm简介 说明1 说明2 步骤1 步骤2 步骤3 步骤4 步骤5 步骤6 CLI项目结构 CLI项目结构笔记 image.png 模版编译器
  • ref属性

原生控件通过ref获取的是一个真实DOM元素,而子组件通过ref获取的是一个VueComponent对象


image.png
  • props组件参数属性

类似于java方法的形参。data:{ age:12 }和props:[ age ]如果这两个对象里面存在同名变量是互不兼容的,不可同名,props优先级更高。且在程序运行时是先执行扫描props后执行data,可以定义一个data:{myAge:this.age}区分开。
参数可以是字符串、布尔值、数值、也可以是一个函数
注意:在Vue组件中不建议修改父组件传递过来的props里面的参数值,虽然可以修改成功,有时候也可以简单实现特定功能,但是依然是不建议这样做的

父==》子
由 子==》父 通信多种方式:

======组件通信1:子组件通过props函数参数方式向父组件回调通信=======
=====>子组件ChildView
<div @click="showCall">点击回调父组件</div >
export default {
  name: "ChildView",
  props: {
    myFunctionA: Function,
  },
  methods: {
    showCall() {
      this.myFunctionA(123456);
    },
  },
};

=====>父组件
<ChildView :myFunctionA="myFunctionB"/ >
export default {
  name: "App",
  methods: {
    myFunctionB(obj) {
       alert("子组件回调内容=" + obj);//子组件回调内容=123456
    },
  },
};

======组件通信2:子组件通过v-on:自定义事件方式向父组件回调通信=======
=====>子组件ChildView
<div @click="showCall">点击回调父组件</div >
export default {
  name: "ChildView",
  methods: {
    showCall() {
      //发射和触发实例身上的自定义事件myFunctionA
      this.$emit("myFunctionA",123456);
    },
  },
};

=====>父组件
<ChildView v-on:myFunctionA="myFunctionB"/ >
或
<ChildView @myFunctionA="myFunctionB"/ >

export default {
  name: "App",
  methods: {
    myFunctionB(obj) {
       alert("子组件回调内容=" + obj);//子组件回调内容=123456
    },
  },
};

======组件通信3:组件通信2的变种,父组件通过ref与vc实例接收通信=======
=====>子组件ChildView
<div @click="showCall">点击回调父组件</div >
export default {
  name: "ChildView",
  methods: {
    showCall() {
      //发射和触发实例身上的自定义事件myFunctionA
      this.$emit("myFunctionA",123456);
    },
  },
};

=====>父组件
<ChildView ref="demo"/ >
export default {
  name: "App",
  methods: {
    myFunctionB(obj) {
       alert("子组件回调内容=" + e);//子组件回调内容=123456
    },
  },
mounted(){
   //模拟一个页面挂载显示3秒后绑定回调,点击子组件后回调收集信息的操作
   settimeout(() => {
        this.$refs.demo.&on("myFunctionA",this.myFunctionB)
      }, 3000);
}
};

======组件通信4:全局事件总线,推荐的方式=======
=====>子组件ChildView
<div @click="showCall">点击回调父组件</div >
export default {
  name: "ChildView",
  methods: {
    showCall() {
      //发射事件myFunctionA
      this.$bus.$emit("myFunctionA",123456);
    },
  },
};

=====>父组件
<ChildView/ >
export default {
  name: "App",
  methods: {
    myFunctionB(obj) {
       alert("子组件回调内容=" + e);//子组件回调内容=123456
    },
  },
  mounted(){
   //通过注册的$bus事件总线,监听
    this.$bus.&on("myFunctionA",this.myFunctionB)
}
};
传参通信
  • mixin(混入/混合)

功能:可以把多个组件共用的代码模块和配置提取封装成一个mixin对象来使用。mixin用于在多个组件间共享代码。它们允许你定义一组可复用的选项,然后将这些选项混合到任何组件的选项中。mixin可以包含组件的任何合法选项,如 data、methods、computed、watch 等。

自定义插件:更适合添加全局功能,如全局方法、指令、过滤器等。
mixin:更适合在多个组件间共享代码和逻辑。被导入的地方才生效。

第一步定义mixin,例如:
{
   data(){},
   methods:{},
   mounted() {}
   ......
}

第二步使用mixin,例如:
(1).全局混入,在入口文件main.js:Vue.mixin(xxx)
(2).局部混入:mixins :「'xxx']

《----------mixin.js代码如下-----------》
export const myMixin1 = {
    data() {
        return {
        //与组件同名count变量冲突,组件count优先级高(覆盖替换)
            count: 0
        }
    },
    methods: {
        //与组件同名showCount()冲突,组件showCount()优先级高(覆盖替换)
        showCount() {
            alert(this.count)
        }
    },
    mounted() {
        //生命周期:如果组件也重新写了mounted() ,则会合并,
       //组件优先级高,先调用组件mounted(),后调用mixin的mounted()方法
        console.log('mixin mounted')
    }
}
export const myMixin2 = {
   ......
}
----------》组件内局部引入mixin.js
import {myMixin1,myMixin2 } from '../mixins/mixin.js'
export default {
  mixins: [myMixin1,myMixin2]
}
----------》项目全局引入mixin.js
import {myMixin1,myMixin2} from '../mixins/mixin.js'
Vue.mixin(myMixin1)
Vue.mixin(myMixin2)
  • 自定义插件

在 Vue.js 中,自定义插件和 mixin 都是用来扩展 Vue 功能和代码复用的机制,但它们的用途和工作方式有所不同。

自定义插件主要用于向 Vue 添加全局功能,如全局方法、指令、过滤器、组件等。插件可以包含一个或多个功能,并且可以通过 Vue.use() 方法来安装到 Vue 应用中。插件的核心是一个对象或构造函数,必须提供一个 install 方法。

Vue.use()被调用引入插件后,就会扫描一遍插件内容。


插件1
插件2
  • scoped样式作用域和lang写法

未添加<style scoped >的时候,如果多个组件内节点定义同名class="demo"选择器,在不同组件内都写了demo样式,则各个组件内的demo样式会互相影响。添加scoped限制样式作用域就锁在当前组件中,通常会给子组件加上scoped。
注意:App.vue内的style可以被子组件访问到。


image.png
  • 自定义事件

1.组件实例使用自定义事件:<ChildView v-on:myFunctionA="demoFunctionListener"/ >
2.组件内设置绑定: this.$emit("myFunctionA",123456);
4.组件内设置解绑单个自定义事件: this.$off("myFunctionA");
5.组件内设置解绑多个自定义事件: this.$off(["myFunctionA","myFunctionB","myFunctionC"]);
6.组件内设置解绑所有自定义事件:this.$off();

父组件往子组件传递函数的操作可以改写为自定义事件,因为传递函数到子组件的目的就是为了子组件能给父组件回调,自定义事件刚好满足这个需求。当然最好用全局事件总线方式。

自定义事件
  • 全局事件总线

main.js中注册全局事件Vue.prototype.$bus = this


全局事件总线
  • nextTick操作(比较常用和重要)

可以监听捕获Vue在下一次解析dom模板的动作。对于多次更新Vue数据导致的回调更新,可以在nextTick函数方法中在所有代码执行完毕后,统一 一次执行更新解析模版,这是一种Vue的优化机制。


image.png
  • 配置代理服务

通过Vue脚手架便捷快速的配置代理服务器,解决浏览器同源策略问题,实现跨域请求。该方式配置的代理服务器会在脚手架的帮助下,运行在与当前浏览器项目同一个端口号上,所以可以实现代理服务的功能。浏览器和代理服务运行在同一端口同一个源上,规避了同源策略问题。
pathRewrite:设置正则表达式,将发送到目标服务的前缀替换为空字符串前缀。

Vue脚手架配置代理服务
  • 第三方资源引用

组件方式
index.html中引入
  • 插槽的使用

若子组件template 中没有包含一个 <slot> 元素,则该组件在父组件被使用的地方,起始标签和结束标签之间的任何内容都会被抛弃。


默认插槽
具名插槽
作用域插槽

四、vuex插件

vuex是什么?
vuex 是一个用来管理组件之间通信的插件,它是一个专为【vue.js】应用程序开发的状态管理模式。它解决了组件之间同一状态的共享问题,它能够更好地在组件外部管理状态。每一个 vuex 应用的核心就是 store(仓库)。“store” 基本上就是一个容器,它包含着你的应用中大部分的状态 ( state )。
(1)Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件(注:跨不同组件)也会相应地得到高效更新。(这是用这个插件的主要目的)
(2)改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
(3)状态管理:管理数据的读/写,数据带有响应式特性。

Vuex用于多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。有点类似java中全局的静态变量和静态类方法,但是java的静态属性不具备响应式特性。

  • VueComponents(客户):下单给Actions。
  • Actions(服务员):dispatch处理稍微复杂的业务逻辑。过于简单的可以直接绕过它,在组件直接使用commit操作到Mutations。—》$store.dispatch("abc",xxxxx) abc方法名小写
  • Mutations(厨子):处理最后的数据成品。—》$store.commit("Abc",xxxxx) ABC方法名大写
  • Devtools(厨房监工):开发者工具。监听Mutations变化。在整个vuex使用过程中,可以在Actions直接操作store的state内容。但是如此使用的话,开发者工具就无法监听Mutations且失去作用和意义了。—》获取store内状态$store.state.aabbcc
原理流程图1 原理流程图2 分析1 分析2

搭建环境:vue2中,要用vuex的3版本;vue3中,要用vuex的4版本。vue2安装vuex:npm i vuex@3

操作1 操作2 操作3
  • getters属性:是计算属性computed的孪生兄弟。当state中的数据需要经过加工后再使用时,可以使用getters加工。写在getters的计算方法也是全局通用的。
image.png
  • mapState,mapGetters
    image.png
image.png image.png
  • mapActions,mapMutations
    注:incrementOdd,incrementWait;increment,decrement是几个自定义函数名
image.png image.png image.png
  • 模块化命名空间
    namespaced:true

    优点:不同业务模块分不同的js文件编写不同的countAbout.js,personAbout.js对象状态文件,通过在store.js文件中导入后统一管理这些状态文件。
使用1 使用2 优点 image.png

五、路由插件

  • 介绍

vue单页面项目如何实现以往多页面html展示?
那就需要用到路由插件了。
使用路由技术,把多个组件按路由键值对形式保存起来,通过路由器展示想要展示的组件,实现多页面项目的效果。并且路由可以实现单个页面部分区域的组件显示和切换。
系统关键词:this.$router

image.png
切记是routes而不是routers, routes: [ { path: "/MyRouterA", component: MyRouterA }, ]
vue2只能使用router3.0,在下载时指定版本号:npm i vue-router@3
路由基本使用
image.png
  • 多级路由(嵌套路由)

router.js中配置一级路由路径加‘/’,二级路由不需要‘/’。router-link中需要写组件的完整路径。
home,about路由组件都是顶级路由,news,message都是子路由。如下配置,要想让news在home的位置显示,那就必须把news拎出外面和home一层设置为顶级路由

image.png
image.png
  • 路由命名

image.png
  • 路由传参

1.query传参方式
to的字符串传参:参数简便的时候使用字符串

字符串传参
to的对象传参:参数较多的时候使用对象
对象传参
image.png
image.png
2.params传参方式(常用)
image.png
image.png
image.png
  • props接受参数方式

image.png
image.png
props为true
props为数组
props为对象
  • 历史栈replace属性使用

replace的权限是给到目标路由的,由它决定是否覆盖替换。


image.png
  • 编程式路由导航:在js中操作路由,更加自由多样化

image.png
  • 缓存路由组件

在一个tab导航切换组件中,缓存其中多个组件。如: <keep-alive :include="News,Message">


image.png
  • 路由组件新增的生命周期钩子:activated,deactivated

image.png
  • 路由守卫:相当于路由过滤器

全局守卫:router.js中设置前置守卫beforeEach和后置守卫afterEach

全局守卫
独享守卫:router.js中设置。只有一个独立的前置守卫beforeEnter
独享守卫beforeEnter
组件内守卫:在各个子助教中设置。beforeRouteEnter和beforeRouteLeave
image.png
全局守卫beforeEach和组件内守卫beforeRouteEnter都是组件实例创建之前调用,之后马上调用afterEach,而beforeRouteLeave是当前组件实例离开的时候才会调用,到达目标组件后才会执行上一个组件的beforeDestroy。
路由和生命周期区别对比
守卫顺序
  • 路由器的两种工作模式

image.png

相关文章

网友评论

      本文标题:前端学习笔记—Vue2组件化

      本文链接:https://www.haomeiwen.com/subject/tacdcjtx.html