vue高级特性的详细说明

watch:{
	a(){
	 //doSomething
	}
}

watch:{
	a:{
		handler:'doSomething'
	}
},
methods:{
	doSomething(){
		//当 a 发生变化的时候，做些处理
	}
}

watch:{
	obj:{
		handler:'doSomething',
		deep:true
	}
},
methods:{
	doSomething(){
		//当 obj 发生变化的时候，做些处理
	}
}

watch:{
	obj:{
		handler:'doSomething',
		deep:true,
		immediate:true
	}
},
methods:{
	doSomething(){
		//当 obj 发生变化的时候，做些处理
	}
}

 watch: {
  // 你可以传入回调数组，它们会被逐一调用
  a: [
    
   'handle1',
    
   function handle2 (val, oldVal) { /* ... */ },
    
   {
    handler: function handle3 (val, oldVal) { /* ... */ },
    /* ... */
   }
    
  ],
  
 }

<template>
  <div>
    <input type="text" @input="inputHandler('hello', $event)" />
  </div>
</template>


export default {
  methods: {
    inputHandler(msg, e) {
      console.log(e.target.value)
    }
  }
}

//blog-post组件的模板

<button v-on:click="$emit('enlarge-text', 0.1)">
 Enlarge text
</button>

<blog-post
 ...
 v-on:enlarge-text="postFontSize += $event"
></blog-post>

<div id="example">{{message}}</div>
var vm = new Vue({
 el: '#example',
 data: {
  message: '123'
 }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
 vm.$el.textContent === 'new message' // true
})

methods: {
 updateMessage: async function () {
  this.message = '已更新'
   //在这里可以看出，message并没有立刻被执行
   //要理解页面刷新和代码执行速度的差别
   //通常我们在页面上立刻就能看到结果，那是因为一轮队列执行其实很快，感觉不出DOM刷新的过程和所耗费的时间
   //但对于代码的执行，属于即刻级别，DOM没更新就是没更新，就是会有问题
  console.log(this.$el.textContent) // => '未更新'
   
  await this.$nextTick()
  console.log(this.$el.textContent) // => '已更新'
 }
}

Vue.component('my-component', {
 functional: true,
 // Props 是可选的
 props: {
  // ...
 },
 // 为了弥补缺少的实例
 // 提供第二个参数作为上下文
 render: function (createElement, context) {
  // ...
 }
})

<template functional>
...
</template>

<script>
...
</script>

<style>
...
</style>

var EmptyList = { /* ... */ }
var TableList = { /* ... */ }
var OrderedList = { /* ... */ }
var UnorderedList = { /* ... */ }

Vue.component('smart-list', {
 functional: true,
 props: {
  items: {
   type: Array,
   required: true
  },
  isOrdered: Boolean
 },
 render: function (createElement, context) {
  function appropriateListComponent () {
   var items = context.props.items

   if (items.length === 0)      return EmptyList
   if (typeof items[0] === 'object') return TableList
   if (context.props.isOrdered)   return OrderedList

   return UnorderedList
  }

  return createElement(
   appropriateListComponent(),
   context.data,
   context.children
  )
 }
})

// Parent.vue
<Child @mounted="doSth" />

//Child.vue
mounted(){
  this.$emit('mounted');
}

// Parent.vue

<Child @hook:mounted="doSth" /> 

methods:{
  doSth(){
    //some codes here
  }
}

<style scoped>
.a >>> .b { /* ... */ }
</style>

.a[data-v-f3f3eg9] .b { /* ... */ }

export default {
  methods: {
    getParamsId() {
      return this.$route.params.id
    }
  }
}

export default {
  props: ['id'],
  methods: {
    getParamsId() {
      return this.id
    }
  }
}

const router = new VueRouter({
  routes: [{
    path: '/user/:id',
    component: User,
    props: true
  }]
})

const router = new VueRouter({
  routes: [{
    path: '/user/:id',
    component: User,
    props: (route) => ({
      id: route.query.id
    })
  }]
})

Vue.component('async-example', function (resolve, reject) {
 setTimeout(function () {
  // 向 `resolve` 回调传递组件定义
  resolve({
   template: '<div>I am async!</div>'
  })
 }, 1000)
})

Vue.component('async-webpack-example', function (resolve) {
 // 这个特殊的 `require` 语法将会告诉 webpack
 // 自动将你的构建代码切割成多个包，这些包
 // 会通过 Ajax 请求加载
 require(['./my-async-component'], resolve)
})

Vue.component(
 'async-webpack-example',
 // 这个 `import` 函数会返回一个 `Promise` 对象。
 () => import('./my-async-component')
)

new Vue({
 // ...
 components: {
  'my-component': () => import('./my-async-component')
 }
})

const AsyncComponent = () => ({
 // 需要加载的组件 (应该是一个 `Promise` 对象)
 component: import('./MyComponent.vue'),
 // 异步组件加载时使用的组件
 loading: LoadingComponent,
 // 加载失败时使用的组件
 error: ErrorComponent,
 // 展示加载时组件的延时时间。默认值是 200 (毫秒)
 delay: 200,
 // 如果提供了超时时间且组件加载也超时了，
 // 则使用加载失败时使用的组件。默认值是：`Infinity`
 timeout: 3000
})

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'
//更多导入

export default {
 components: {
  BaseButton,
  BaseIcon,
  BaseInput
 }
}

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
 // 其组件目录的相对路径
 './components',
 // 是否查询其子目录
 false,
 // 匹配基础组件文件名的正则表达式
 /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
 // 获取组件的配置，也就是具体内容，具体定义，组件的本身代码
 const componentConfig = requireComponent(fileName)

 // 获取组件的 PascalCase 命名，用来规范化组件名
 const componentName = upperFirst(
  camelCase(
   // 获取和目录深度无关的文件名
   fileName
    .split('/')
    .pop()
    .replace(/\.\w+$/, '')
  )
 )

 // 全局注册组件
 Vue.component(
  componentName,
  // 如果这个组件选项是通过 `export default` 导出的，
  // 那么就会优先使用 `.default`，
  // 否则回退到使用模块的根。
  componentConfig.default || componentConfig
 )
})