Vue实例和组件实例

明月落乌江

已于 2022-10-15 17:27:01 修改

阅读量2.4k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-06-20 09:07:28 首次发布

原文链接：https://cn.vuejs.org/v2/guide/

版权

vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一.创建一个应用实例

每一个vue应用都是通过createApp函数创建一个新的应用实例开始的
const app = Vue.createApp({ /*选项*/ })
该应用实例是用来在应用中注册“全局”组件的

//创建一个Vue应用
const app = Vue.createApp({})
   //添加组件
   app.component('SearchInput',SearchInputComponent)
   //添加指令
   app.directive('focus',FocusDirective)
   //使用插件
   app.use(LocalePlugin)

//应用实例暴露的大多数方法都会返回该同一实例，允许链式：
Vue。createApp ({})
   .component('SearchInput',SearchInputComponent)
   .directive('focus',FocusDirective)
   .use(LocalePlugin)

二.根组件

传递给createApp的选项用于配置根组件.当我们挂载应用时,该组件被用作渲染的起点.
一个应用需要被挂载道一个DOM元素中,例如,如果你想把一个Vue应用挂载道<div id= "app">:

设置Vue组件的选项
const RootComponent = { /*选项*/ }
将组件的选项传入实例中,创建Vue
const app = Vue.createApp(RootComponent)
挂载道指定的DOM元素上
const vm = app.mount('#app')
文档中经常会使用vm这个变量命表示组件实例

三.组件实例property

data中定义的property是通过组件实例暴露的：

const app = Vue.createApp({
    data(){
      return {count:4}
   }
   })
const vm = app.mount('#app')
console.log(vm.count)  // = > 4

Vue还通过组件实例暴露了一些内置property,如$attrs和$emit,这些property都有一个$前缀，以避免与用户定义的property名冲突。

四.生命周期钩子

每一组件在被创建时都要经过一系列的初始化过程----例如，需要设置数据监听，编译模板，将实例挂载道DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
比如create钩子可以用来在一个实例被创建之后执行代码：

//Vue选项
Vue.createApp({
    data(){//属性
        return {count:1}
    },
    created(){//created钩子可以用来在该实例被创建之后执行
        //`this`指向vm实例
        console.log('count is : ' + this.count)
        // = > "count is :1"
    }
})

也有一些其它的钩子，在实例生命的不同阶段被调用，如mounted，updated和unmounted.
生命周期钩子的this上下指向调用它的当前活动实例。
注意：
不要在选项property或回调上使用箭头函数，比如created:() = > console.log(this.a)或wm.$watch(;'a',newValue=>this.myMethod())
因为箭头函数并没有this,this会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

五.生命周期图示

如图生命周期：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wEoqyakv-1655687209526)(D:\Desktop\lifecycle.svg)]

一旦创建Vue实例，就会产生很多个环节

第一部分：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tgYW6OcV-1655687209529)(D:\Desktop\Snipaste_2022-06-08_15-48-11.png)]

(第一个环节)init Events&Lifecycle：初始化制定规则，比如生命周期有几个，名称有哪些；事件修饰符等等，但是数据代理还未开始。
第一个生命周期函数beforeCreate,此时：无法通过vm访问道data中的数据，methods中的方法。

beforeCreate(){
   console.log('beforeCreate');
   console.log(this); //Vue输出无_data
   debugger;//打断点
}

(第二个环节)init injections&reactivity：初始化响应式，数据检测，数据代理
第二个生命周期函数created，此时：可以通过vm访问data中的数据，methods中配置的方法

created(){
    console.log('created');
    console.log(this);
    debugger;//打断点
}

第二部分（解析模板，生成虚拟DOM）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qR5Z3PGS-1655687209530)(D:\Desktop\Snipaste_2022-06-08_16-23-57.png)]

此阶段Vue开始解析模板，生成虚拟DOM(内存中)，页面还不能显示解析好的内容

验证代码：

beforeMount(){
   console.log('beforeMount');
   console.log(this);
   debugger;//打断点
}

如果Vue中没有el，到这里就结束了，后面的代码不执行，显示页面也是未经解析的。

当再次调用vm.$mount('#root')，页面就会重新解析

第三部分(部分页面挂载)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n0Z52RQz-1655687209531)(D:\Desktop\Snipaste_2022-06-08_16-25-27.png)]

beforeMount(){}:此时：页面呈现的是未经Vue编译的DOM结构；所有对DOM的操作，最终都不奏效

验证：

在Console中操作DOM替换标签内的内容，放开断点，最后页面中还是不显示；或者在函数内部修改数据，页面最终也不会显示。

Create vm.$el and replace “el” with it（将vm身上的el替换掉整个el的环节）：将内存中的虚拟DOM转为真实DOM插入页面。

验证$el为真实DOM的代码：

            mounted() {
                console.log('mounted', this.$el);
                console.log('是否为真实DOM', this.$el instanceof HTMLElement);//结果为true
            }

🔱mounted(){}：Vue完成模板解析并把初始的真实DOM元素放入页面后（完成挂载）调用mounted（只调用一次）;此时：页面中呈现的是经过Vue编译的DOM；对DOM的操作均有效（尽可能避免）；至此初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作。

🔱验证代码：

            mounted() {
                console.log('mounted');
                console.log(this);
                document.querySelector('h1').innerText = 123456789;//结果为123456789
                debugger; //打断点
            }

第四部分（更新流程）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d2Tx0sVA-1655687209531)(D:\Desktop\Snipaste_2022-06-08_16-41-56.png)]

when data changes(当数据改变的时候)，Vue马上调用beforeUpdata生命周期函数，此时：数据是新的，但是页面是旧的，即：页面尚未和数据保持同步

Virtual DOM re-render and patch(重新渲染页面)，根据新数据，生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，最终完成页面更新，即：完成了Model->View的更新

Updated生命周期函数，此时：数据是新的，页面也是新的，即：页面和数据保持同步

第五部分（销毁流程）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B6UKeMr4-1655687209532)(D:\Desktop\Snipaste_2022-06-08_16-56-45.png)]

想要进入销毁流程必须先经过这个when vm.$destroy() is called (当vm身上的$destroy方法被调用的时候)环节

验证代码：

methods:{
   bye(){
      console.log('bye');
      this.$destroy();      
   }
}

vm.$destroy()

用法：完全销毁一个实例。清理它与其他实例的链接，解绑它的全部指令及事件监听器。

beforeDestroy(销毁之前)：此时：vm中所有的data，methods指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器，取消订阅消息，解绑自定义事件等收尾操作。

Teardown watches，child components and event listeners(移除所有监视，子组件和事件（自定义事件）监听器)

destroyed（销毁）

生命周期钩子有8个4对

beforeCreate、created：创建之前和创建完毕指的是数据检测和数据代理的创建
beforeMount、mounted：挂载之前和挂载完毕
beforeUpdata、Updated：更新之前和更新完毕
beforeDestroy、destroyed：销毁之前和销毁完毕
mounted和beforeDestroy是很重要的生命周期

总结：

生命周期：

又名：生命周期回调函数、生命周期函数、生命周期钩子。

是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。

生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

生命周期函数中的this指向是vm 或组件实例对象。

常用的生命周期钩子：

mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。

beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

销毁后借助Vue开发者工具看不到任何信息。

销毁后自定义事件会失效，但原生DOM事件依然有效。

一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。