vue-笔记3

关于main.js的一点解释

• import

参考：https://blog.csdn.net/function__/article/details/79040111

例子：
import store from "./store";
import { store } from "./store";

解释：
有没有大括号和文件是否是js无关，
有默认导出的export default语法时，import总是导入这个，名字瞎起也可以。
没有默认导出的export default，就需要按名字导入，且名字一定要和文件里的一致。

import './public/js/globalConfig'

一整个模块仅为副作用（中性词、无贬义含义）而导入，而不是导入模块中的任何内容，这将运行模块中的全局代码，但实际上不导入任何值。
原解释：Import an entire module for side effects only, without importing anything. This runs the module’s global code, but doesn’t actually import any values.

• Vue.config.productionTip = false;

阻止显示生产模式的消息，否则控制台就会打印这个：
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

• render

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#yyy");

render方法的实质就是生成template模板；
上面写法的演变：

render: function (createElement) {
  return createElement(App);
}

到

render (createElement) {
  return createElement(App);
}

到

render (h){
  return h(App);
}

到箭头函数写法

render: h => h(App);

$mount和el两者在使用中没有什么区别，都是将实例化后的vue挂载到指定的DOM元素中

用法：
如果在实例化vue时指定el，则该vue将会渲染在el对应的DOM中
反之 没有指定el，则vue实例会处于一种“未挂载”的状态，此时通过$mount来手动执行挂载

区别：el是自动挂载，$mount是手动挂载
new vue时候$mount和el并没有什么本质上的不同

（一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #yyy) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。）

• 不可枚举属性&可枚举属性

控制台打印的时候

	console.log(this)
    var one = { b: 2 };
    Object.defineProperty(one, "a", {
      value: 1,
      writable: true,
      configurable: true, //属性是否可以被修改
      enumerable: false,//设置为不可枚举
	});
	
//打印所有，不管是否可枚举
	console.log(Object.getOwnPropertyNames(one))
	
//for..in只能打印可枚举属性
    for (var key in one) {
      console.log(key + "---" + one[key]);
    }

解释：
在使用for-in循环时,返回的是所有能够通过对象访问的、可枚举的属性，既包括实例中的属性又包括原型对象中的属性；
屏蔽了原型中不可枚举属性(即将[[Enumerable]]设置为false的属性)也会在for-in循环中返回,因为根据规定,所有开发人员定义的属性都是可枚举的—只有IE8即更早版本中例外

console.log()的时候可以把所有（包括可枚举与不可枚举）打印出来。比如$route在上图为不可枚举属性。

console.log(this.$route)