Vue0310.组件化编程10.1基本说明

官网链接:https://v2.cn.vuejs.org/v2/guide/components-registration.html

  1. 在大型应用开发时,页面可以划分成很多部分。不同的页面,往往也会有相同的部分——例如可能会有相同的头部导航

  2. 如果每个页面都独自开发,无疑增加了我们的开发成本。因此,我们会把页面的不同部分拆分成独立的组件,然后在不同的页面共享这些组件,避免重复开发

    • 组件(Component)是Vue.js最强大的功能之一(组件提高了复用性:界面复用性和代码复用性)
    • 组件也是一个Vue实例,也包括:data,methods,生命周期函数等
    • 组件渲染需要html模板,所以增加了template属性,属性的值就是HTML模板
    • 对于全局组件,任何Vue实例都可以直接在HTML中通过组件名称来使用该组件
    • data在组件中是一个函数,不再是一个对象,这样每次引用组件都是独立的对象/数据

10.2应用实例

为什么需要组件化编程?

例子

现在希望实现一个功能:点击一个按钮,可以显示点击的次数。如果要求多个按钮都实现该功能呢?

10.2.1非组件化方式

        组件化编程-普通方式


new Vue({ el: "#app", data: {//data数据池 count: 0, count2: 0, count3: 0 } })

如上所述,多个按钮的界面和业务功能都是类似的,但是我们都重新写了一次,代码复用性差,如果是在复杂的案例中,问题将会更加明显。解决方案就是——组件化编程。

10.2.2全局组件方式

        组件化编程-全局组件

组件化-全局组件



// 1.定义一个全局组件,名为 counter // 2.{} 表示的就是 组件相关的内容 // 3.template 用于指定该组件的界面,因为会引用到数据池的数据,所以使用模板字符串 // 4.注意:要把组件视为Vue实例,也有自己的数据池和 方法 methods // 5.对于组件,我们的数据池数据是使用函数/方法返回的(目的是为了保证每一个组件的数据是独立的!),不能使用原来的方式 // 6.这时我们就实现了 界面通过template实现共享,业务处理可以复用 的目的 // 7.全局组件是属于所有的vue实例的,因此可以在任何一个vue实例中使用: // 例如当前页面中有一个vue实例,如果我们再声明几个vue实例,该全局组件都可以在这些vue实例中使用 Vue.component("counter", { //组件渲染需要html模板,所以增加了template属性,值就是HTML模板 template: ``, data() {//注意和原来的方式不一样 return {count: 0} }, methods: {//方法可以共享,但data数据不能共享 click() { this.count++;//每一个组件的this对象不同,因此同一个方法改变的是不同的count } } }) //创建vue实例,必须有 let vm = new Vue({ el: "#app" })

10.2.3局部组件方式

        组件化编程-局部组件

组件化-局部组件



//定义一个组件 buttonCounter // 可以把常用的组件定义在js文件中(export),如果某个页面需要使用,直接import引入即可 const buttonCounter = { template: ``, data() { return {count: 0} }, methods: { click() { this.count++; } } } //创建vue实例,必须有 let vm = new Vue({ el: "#app", components: {//引入某个组件,此时该组件就是一个局部组件,该组件的使用范围只在当前的vue实例中 "my_counter":buttonCounter } }) // 如果新创建了一个vue实例,挂载到一个div中(id="app2"),在该div中如果要使用局部组件 // 也必须在该vue实例中引入该组件,否则div((id="app2")无法使用该局部组件

10.2.4全局组件VS局部组件

  1. 全局组件是属于所有的vue实例的,因此可以在任何一个vue实例中使用。

    例如当前页面中有一个vue实例,如果我们再声明几个vue实例,该全局组件都可以在这些vue实例中使用

  2. 局部组件的使用范围只在当前的vue实例中。

    例如:如果新创建了一个vue实例,挂载到一个新的div中(如:id=”app2″),在div中如果要使用局部组件,也必须在新的vue实例中引入该组件,否则该div中无法使用该局部组件

  3. 组件定义需要放在new Vue()前,否则组件引入/注册会失效

10.3组件化小结

  • 组件也是一个Vue实例,它的定义也包括:data,methods,生命周期函数等
  • data在组件中是一个函数,不再是一个对象,这样每次引用组件都是独立的对象
  • 组件渲染需要html模板,所以增加了template属性,属性的值就是HTML模板

11.生命周期和钩子函数

官网:https://v2.cn.vuejs.org/v2/guide/instance.html

11.1基本说明

  1. Vue实例有一个完整的生命周期,也就是说从开始创建、初始化数据、编译模板、挂载DOM、渲染-更新-渲染、卸载等一系列过程,我们称之为Vue实例的生命周期
  2. 钩子函数(监听函数/生命周期函数):Vue实例在完整的生命周期过程中(比如设置数据监听,编译模板,将实例挂载到DOM,在数据变化时更新DOM等),会自动触发钩子函数
  3. 钩子函数的作用:在某个阶段,给程序员一个做某些处理的机会

11.2Vue实例的生命周期

  1. new Vue()

    创建了一个Vue的实例对象,此时就会进入组件的创建过程

  2. Init Events & Lifecycle

    初始化组件的事件和生命周期函数

  3. beforeCreate

    组件创建之后遇到的第一个生命周期函数,这个阶段data和methods以及dom结构都未被初始化,也就是获取不到data的值,不能调用methods中的方法

  4. Init injections & reactivity

    这个阶段中,正在初始化data和methods中的方法

  5. created

    这个阶段组件的data和methods中的方法已经初始化结束,可以访问,但是dom结构未初始化,页面未渲染

    此阶段适合发起ajax请求,因为模板的数据未渲染

  6. 编译模板结构(在内存中)

  7. beforeMount

    当模板在内存中编译完成,此时内存中的模板结构还未渲染至页面上,看不到真实的数据

  8. Create vm.$el and replace ‘el’ with it

    在把内存中渲染好的模板结构替换至真实的dom结构,也就是页面上

  9. mounted

    此时页面渲染好,用户看到的是真实的页面数据,生命周期创建阶段完毕,进入到了运行中的阶段

  10. 生命周期运行中

    1)beforeUpdate:当执行此函数,数据池的数据是新的,但页面是旧的

    2)Virtual DOM re-render and patch:根据最新的data数据,重新渲染内存中的模板结构,并把渲染好的模板结构替换至页面

    3)updated:页面已经完成了更新,此时data数据和页面的数据都是新的

  11. beforeDestroy

    当执行此函数时,组件即将被销毁,但是还没有真正开始销毁,此时组件的data,methods方法还可以被调用

  12. Teardown

    注销组件和事件监听

  13. destroyed

    组件已经完成了销毁


11.3应用实例

需求:展示Vue实例的生命周期和钩子函数执行时机

  1. 重点研究几个重要的钩子函数(监听函数/生命周期函数):beforeCreate,created,beforeMount,mounted,beforeUpdate,updated
  2. 在这几个钩子函数中,数据模型是否加载/使用?自定义方法是否加载/可用?html模板是否加载/使用?html模板是否完成渲染?