vue handler ()的参数是什么_你应该知道的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
})

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '未更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '已更新'
      console.log(this.$el.textContent) // => '未更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '已更新'
      })
    }
  }
})

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
  )
})