Vue学习笔记（一）

本文仅为vue2.0学习过程的一些简单笔记笔记以便翻阅

prop属性：

组件实例的作用域是孤立的。如果子组件内想使用父组件数据，我们就需要在子组件使用prop来传递数据。 prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props 选项声明 “prop”：

以下是prop的相关验证：

Vue.component('example', {
  	props: {
    // 基础类型检测 （`null` 意思是任何类型都可以）
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组／对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

vue2 props API

组件

一个组件下只能有一个并列的div

data必须是函数(如下为单文件组件中格式)：

<script>
	export default {
		data () {
			return {
				msg: 'hello vue!'
			}
		}
	}
</script>

单文件组件（.vue）

ESLint

ESLint 是一个开源的 JavaScript 代码检查工具。

反正我没用（苦笑）后面再研究研究ESLint，对于团队开发这个应该是个神器。

Vue实例生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。

例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些生命周期钩子，这就给我们提供了执行自定义逻辑的机会。

简单粗暴先上图：

java-javascript Vue Life Cycle

以下通过代码来观察生命周期钩子函数的运行情况：

beforeCreate:

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

	beforeCreate: function () {
           console.group('beforeCreate 创建前状态===============》');
           console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
           console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
    }

console：

beforeCreate 创建前状态===============》
	 el     : undefined
	 data   : undefined

created

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

    created: function () {
        console.group('created 创建完毕状态===============》');
        console.log("%c%s", "color:red","el     : " + this.$el); //undefined
        console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
    }

console:

created 创建完毕状态===============》
	 el     : undefined
	 data   : [object Object]

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

    beforeMount(){
		console.group('beforeMount 挂载前状态===============》');
        console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
        console.log(this.$el);
        console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
	}

console:

beforeMount 挂载前状态===============》
	 el     : undefined
	 undefined
	 data   : [object Object]

mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

    mounted: function () {
        console.group('mounted 挂载结束状态===============》');
        console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
        console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
    }

console:

mounted 挂载结束状态===============》
	 el     : [object Comment]
	 data   : [object Object]

beforeUpdate

当data中数据被修改后：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

    beforeUpdate: function () {
        console.group('beforeUpdate 更新前状态===============》');
        console.log("%c%s", "color:red","el     : " + this.$el);
        console.log("%c%s", "color:red","data   : " + this.$data); 
    }

console:

beforeUpdate 更新前状态===============》
	 el     : [object Comment]
	 data   : [object Object]

updated

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

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

    updated: function () {
        console.group('updated 更新完成状态===============》');
        console.log("%c%s", "color:red","el     : " + this.$el);
        console.log(this.$el); 
        console.log("%c%s", "color:red","data   : " + this.$data); 
    }

console:

updated 更新完成状态===============》
	 el     : [object HTMLDivElement]
	 <div>​…​</div>​
	 data   : [object Object]

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

    beforeDestroy: function () {
        console.group('beforeDestroy 销毁前状态===============》');
        console.log("%c%s", "color:red","el     : " + this.$el);
        console.log(this.$el);    
        console.log("%c%s", "color:red","data   : " + this.$data); 
    }

console:

beforeDestroy 销毁前状态===============》
	 el     : [object HTMLDivElement]
	 <div>​…​</div>​
	 data   : [object Object]

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

    destroyed: function () {
        console.group('destroyed 销毁完成状态===============》');
        console.log("%c%s", "color:red","el     : " + this.$el);
        console.log(this.$el);  
        console.log("%c%s", "color:red","data   : " + this.$data); 
    }

console:

destroyed 销毁完成状态===============》
	 el     : [object HTMLDivElement]
	 <div>​…​</div>​
	 data   : [object Object]

应结合各个钩子函数的状态和实际场景进行使用。

具体场景慢慢发现吧！！！

router钩子

正如其名，vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。

beforeEach(全局钩子)

可以使用beforeEach注册一个全局的before钩子。同样可以注册一个全局的 after 钩子，不过它不像 before 钩子那样，after 钩子没有 next 方法，不能改变导航。

这里用配置nprogress插件来进行简单的演示：

import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'

const router = new VueRouter({ ... })
// 简单配置
Nprogress.inc(0.4)
Nprogress.configure({ easing: 'ease', speed: 1000, showSpinner: true })

//to(Route):即将要进入的目标路由对象
//from(Route):当前导航正要离开的路由
//next(Function):resolve当前钩子，执行管道中下一个钩子或者中断当前导航等
router.beforeEach((to,from,next) => {
  Nprogress.start()
  next()
})

router.afterEach(() => {
  Nprogress.done()
})

这样就可以简单配置上nprogress了，具体的一些样式修改这样直接修改nprogress的css文件。

组件内的钩子

beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当钩子执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

关于router钩子的更多信息

transition

关于过度效果苦恼了我几天，终于让我给解决了。感觉过度效果，状态这些还要多研究研究。

compute

官网上已经说了再清楚不过了 记得用就好了。

"Vue Leaning Notes"

prop属性：

组件

ESLint

Vue实例生命周期

beforeCreate:

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

router钩子

beforeEach(全局钩子)

组件内的钩子

transition

compute

CATALOG

FEATURED TAGS

FRIENDS