VUE学习笔记分享

Posted 2021-04-16 胡大喵子

02

VUE学习笔记分享

Vue根实例为程序执行的入口点;

Vue里的每个组件都是一个Vue实例;

换句话说，一个Vue项目是由实例组成的，或者说一个Vue项目是由组件组成的。这些说法都可以;

Vue实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来;

生命周期函数就是Vue实例在某一个时间点会自动执行的函数;

Vue实例

<div id="root"> <div @click="handleClick"> {{ message }}  </div></div>

var app = new Vue({ el: '#root', data: { message: 'hello world' }, methods: { handleClick: function() { console.log('hello') } }})

vm：ViewModel 的缩写，这个变量名表示 Vue 实例。

el：提供一个在页面上已经存在的DOM元素为Vue实例的挂在目标；

data:  Vue实例的数据对象；

methods:  存放方法，可以直接通过VM实例访问这些方法，活在指令表达式中使用；（不要使用箭头函数，因为箭头函数的this指向是定义时的对象，不是使用时的对象）

props:  可以是数组或对象，用来接收父组件的数据；

computed:  计算属性；

watch:  一个对象，键是需要观察的表达式，值是对应回调函数；

生命周期钩子:  在特定时间点执行的函数；

Vue根实例为程序执行的入口点，Vue里的每个组件都是一个Vue实例。

换句话说，一个Vue项目是由实例组成的，或者说一个Vue项目是由组件组成的。这些说法都可以.

"vm.$el "、"vm.$data"   凡事以"$"符号开头的指的都是Vue的实例属(或方法)

Vue实例的

生命周期钩子

生命周期函数就是Vue实例在某一个时间点会自动执行的函数.

<div id="app"></div>

var vm = new Vue({ el: '#app', template: '<h1>{{message}}</h1>', data: { message: 'hello world' }, // 初始化事件和生命周期结束之后创建 beforeCreate: function() { console.log('beforeCreate') }, // 继续处理外部的注入以及一些双向的绑定之后 created: function() { console.log('created') }, // 条件：是否有“el”选项，是否有“template”选项 // 页面渲染之前（就是模板和数据相结合即将挂在到页面上的一瞬间之前的时间点上之前） beforeMount: function() { console.log('beforeMount'); console.log(this.$el); //挂载的元素，包括里面的所有内容 }, // 页面渲染完了，页面结合数据被挂在到页面之上 mounted: function() { console.log('mounted'); console.log(this.$el); //挂载的元素，包括里面的所有内容 }, // 执行“vm.destory()之后”，组件完全销毁之前 beforeDestroy: function() { console.log('beforeDestroy') }, // 组件完全销毁之后 destroyed: function() { console.log('destroyed') }, // 数据改变，还没有重新渲染之前 beforeUpdate: function() { console.log('beforeUpdate') }, // 数据改变，重新渲染之后 updated: function() { console.log('updated') }})

brforeCreate:  在实例初始化之后，数据观测 (data observer) 和event/watch事件配置之前被调用。

created:  在实例被创建完成之后被立即调用。

    在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount:  在挂载开始之前被调用：相关的render函数首次被调用。（该钩子在服务器端渲染期间不被调用）

mounted:  el被新创建的vm.$el替换，并挂在到实例上去之后调用该钩子。（该钩子在服务器端渲染期间不被调用）

beforeDestory:  实例销毁之前调用。

    在这一步，实例仍然完全可用。（该钩子在服务器端渲染期间不被调用）

destoryed:   Vue 实例销毁后调用。

    调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。（该钩子在服务器端渲染期间不被调用）

beforeUpdate:   数据更新时调用，发生在虚拟 DOM 打补丁之前。

    这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。（该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。）

updated:  由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

    当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。（该钩子在服务器端渲染期间不被调用）

activated:  keep-alive 组件激活时调用。（该钩子在服务器端渲染期间不被调用）

deactivated:  keep-alive 组件停用时调用。（该钩子在服务器端渲染期间不被调用）

errorCaptured:  当捕获一个来自子孙组件的错误时被调用。(2.5.0+ 新增)

    此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

-END -