Vue框架学习（七）

---

一、全局配置

在开发环境下，Vue 提供了全局配置对象，通过配置可以实现生产信息提示、警告忽略等人性化处理。

1、productionTip

使用开发版本的 Vue，即Vue.js时，网页加载后浏览器的控制台会出现英文的提示信息，如果希望在引入Vue.js文件的情况下，关闭提示信息，参考代码如下：

<script src="vue.js"></script>
// ......
<script>
	Vue.config.productionTip = false
	// ......
</script>

通过 Vue 的全局配置productionTip可以控制生产信息的显示或隐藏，将其值设为false即可关闭生产信息提示。

2、silent

Vue 的全局配置对象中，silent可以取消 Vue 日志和警告，值类型为boolean，默认值为false，设为true表示忽略警告和日志，否则不忽略。

示例代码如下：

<div id="app">{{msg}}</div>

<script>
	//将silent设为true，默认为false
	Vue.config.silent = true
	var vm = new Vue({
		el: '#app'
	})
</script>

3、devtools

在 Vue 全局配置中可以对Vue的调试工具vue-devtools进行配置，将Vue.config.devtools设为true表示允许调试，否则不允许调试。

示例代码如下：

<script src="vue.js"></script>
<div id="app">{{msg}}</div>

<script>
	//将devtools设值为false，默认为true
	Vue.config.devtools = false
	var vm = new Vue({
		el: '#app'
	})
</script>

二、组件进阶

1、mixins

mixins是一种分发Vue组件中可复用功能的方式。mixins对象可以包含任何组件选项，当组件使用mixins时，将定义的mixins对象引入组件中即可使用，mixins中的所有选项将会混入到组件自己的选项中。

示例代码如下：

  <script>
    // 定义myMixin对象
    var myMixin = {
      created () {
        this.hello()
      },
      methods: {
        hello () {
          console.log('hello from mixin!')
        }
      }
    }
    // 通过Vue.extend()创建 实例构造器Component
    var Component = Vue.extend({
      // 配置组件选项，其值为自定义选项
      // 将自定义的 myPlugin对象 混入(mixin)到Component中
      mixins: [myMixin]
    })
    // 组件实例化
    var component = new Component()
  </script>

Vue 组件经过mixins混合之后会发生组件选项重用，为了解决这样的问题，mixins提供了相应的合并策略。

(1) 数据对象经历递归合并，组件的数据发生冲突时优先，示例代码如下：

  <script>
    var mixin = {
      data () {
        return { message: 'hello' }
      }
    }
    var vm = new Vue({
      mixins: [mixin],
      data () {
        return { message: 'goodbye' }
      },
      created () {
        console.log(this.$data.message) // 输出结果：goodbye
      }
    })
  </script>
  // 在输出数据时，先从 vm 实例的 data函数 中获取message的值，
  // 如果没有获取到，再去 mixin 中获取。

(2) mixins中的钩子函数将在组件自己的钩子函数之前调用，示例代码如下：

  <script>
    var mixin = {
      created () {
        console.log('mixin钩子调用')
      }
    }
    var vm = new Vue({
      mixins: [mixin],
      created () {
        console.log('组件钩子调用')
      }
    })
  </script>

2、render

在 Vue 中可以使用Vue.render()实现对虚拟DOM的操作。在 Vue 中一般使用template来创建HTML，但这种方式可编程性不强，而使用Vue.render()可以更好地发挥JavaScript的编程能力。

示例代码如下：

  <div id="app">
    <my-component>成功渲染</my-component>
  </div>
  
  <script>
    Vue.component('my-component', {
      // 定义渲染函数 render()
      render (createElement) {
        // createElement()中的第1个参数：创建<p>元素
        return createElement('p', {
          // 第2个参数：配置对象，在对象中配置了<p>元素的样式
          style: {
            color: 'red',
            fontSize: '16px',
            backgroundColor: '#eee'
          }
          // 第3个参数：插槽内容“成功渲染”，可通过$slots来获取
        }, this.$slots.default)
      }
    })
    var vm = new Vue({ el: '#app' })
  </script>

3、createElement

createElement()函数返回的并不是一个实际的DOM元素，它返回的其实是一个描述节点，用来告诉 Vue 在页面上需要渲染什么样的节点。这个描述节点也可称为虚拟节点，简写为VNode。而“虚拟DOM”是对由 Vue 组件树建立起来的这个VNode树的称呼。

示例代码如下：

  <div id="app">
    <my-component>
      <!-- 定义header插槽 -->
      <template v-slot:header>
        <div style="background-color:#ccc;height:50px">
          这里是导航栏
        </div>
      </template>
      <!-- 定义content插槽 -->
      <template v-slot:content>
        <div style="background-color:#ddd;height:50px">
          这里是内容区域
        </div>
      </template>
      <!-- 定义footer插槽 -->
      <template v-slot:footer>
        <div style="background-color:#eee;height:50px">
          这里是底部信息
        </div>
      </template>
    </my-component>
  </div>
  <script>
    Vue.component('my-component', {
      render (createElement) {
        return createElement('div', [
          // 使用this.$slots获取相应插槽
          createElement('header', this.$slots.header),
          createElement('content', this.$slots.content),
          createElement('footer', this.$slots.footer)
        ])
      }
    })
    var vm = new Vue({ el: '#app' })
  </script>

 

---

参考资料：
1、《Vue.js 前端开发实战》，黑马程序员.
2、Vue 2.x 官方API文档. (https://cn.vuejs.org/v2/api/)