Vue入门笔记: 二不懂知识点汇总与解决从入口处每一步、每个语法都搞懂， ❌目前理解不了，待以后理解 main.js

从入口处每一步、每个语法都搞懂， ❌目前理解不了，待以后理解

main.js在哪配置的 webpack的配置❌
解构赋值不确定理解的对不对❌

为什么可以不这么写 router:router
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

因为解构赋值，
对象的属性没有次序，变量必须与属性同名，才能取到正确的值

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // u

理解 new Vue

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

传入的是ComponentOptions

一. Vue接口源码如下：
export interface Vue<
  Data = Record<string, any>,
  Props = Record<string, any>,
  Instance = never,
  Options = never,
  Emit = (event: string, ...args: any[]) => Vue
> {
 ...
  readonly $options: NeverFallback<Options, ComponentOptions<Vue>>
  $mount(elementOrSelector?: Element | string, hydrating?: boolean): this 对应$mount✅
  
  
}
二. ComponentOptions源码如下
export interface ComponentOptions<
  V extends Vue,
  Data = DefaultData<V>,
  Methods = DefaultMethods<V>,
  Computed = DefaultComputed,
  PropsDef = PropsDefinition<DefaultProps>,
  Props = DefaultProps,
  RawBindings = {}
> {
...
// hack is for functional component type inference, should not be used in user code
  render?(
    createElement: CreateElement,
    hack: RenderContext<Props>
  ): VNode | null | void 对应render: h => h(App)函数✅，但语法不理解❌
}

declare module 'vue/types/options' {语法不理解❌
  interface ComponentOptions<V extends Vue> {
    router?: VueRouter 对应router✅
    beforeRouteEnter?: NavigationGuard<V>
    beforeRouteLeave?: NavigationGuard<V>
    beforeRouteUpdate?: NavigationGuard<V>
  }
}

declare module "vue/types/options" {语法不理解❌
  interface ComponentOptions<V extends Vue> {
    store?: Store<any>;对应sotre✅
  }
}

router-view router-link router-view 相当于router-link的承载页面,用于展示router-link 的的内容
App.vue中的router-view为后面的页面占位，每个路由的页面都会显示到这个位置
import()动态加载解读语法解读 () => import('@/views/dashboard/index')：

// 报错
if (x === 2) {
 import MyModual from './myModual';
}

`import`和`export`命令只能在模块的顶层，不能在代码块之中（比如，在`if`代码块之中，或在函数之中）。
无法像require一样动态加载

[ES2020提案](https://github.com/tc39/proposal-dynamic-import) 引入`import()`函数，支持动态加载模块。

`import`命令能够接受什么参数，`import()`函数就能接受什么参数，两者区别主要是后者为动态加载。


if (condition) {
 import('moduleA').then(...);
} else {
 import('moduleB').then(...);
}

VueRouter 语法

理解下面的代码
export const constantRoutes = [
  {
    path: '/redirect',
    component:Layout,
    hidden:true,//没找到对应的❌
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect/index')
      }
    ]
  },
  
  {
    path: '/',
    redirect: '/dashboard',//待以后深入理解❌
    component:Layout,
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/dashboard/index'),
        name: 'Dashboard',
        meta: {title : 'Dashboard',icon: 'documentation', affix:true}
      }
    ]
    
  }
]

源码如下
export declare class VueRouter {
  constructor(options?: RouterOptions)
 }
 export interface RouterOptions {
  routes?: RouteConfig[] 
  //RouteConfig extends RouteConfigSingleView RouteConfigMultipleViews
 }
 
 interface RouteConfigSingleView extends _RouteConfigBase {
  component?: Component对应layout✅
  props?: boolean | Object | RoutePropsFunction
}

interface RouteConfigMultipleViews extends _RouteConfigBase {
  components?: Dictionary<Component>对应layout✅
  props?: Dictionary<boolean | Object | RoutePropsFunction>
}

 interface _RouteConfigBase {
  path: string 对应path: '/redirect' ✅
  name?: string
  children?: RouteConfig[]
  redirect?: RedirectOption
  alias?: string | string[]
  meta?: RouteMeta
  beforeEnter?: NavigationGuard
  caseSensitive?: boolean
  pathToRegexpOptions?: PathToRegexpOptions
}

@这是webpack设置的路径别名，代表根目录

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

this 问题很详细

因为 ES6 中的箭头函数并不会创建其自身的执行上下文，所以箭头函数中的 this 取决于它的外部函数

普通函数this 指向为方法调用的对象，可以通过bind，call，apply，改变this指向
箭头函数比函数表达式更简洁，箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。bind，call，apply只能调用传递参数，不可修改this指向

css left /right，是针对position的。
node中path.resolve()用法 path.resolve('a') 返回的是当前绝对路径拼接现在的参数/Users/xxxx/a
path.resolve('a'，'b') 返回的是当前绝对路径拼接现在的参数/Users/xxxx/a/b
npm命令 npm i module_name -S

包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在 npm i module_name -D

包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D

npm i module_name -g 即 global全局安装(命令行使用)

Vue入门笔记: 二 不懂知识点汇总与解决

Vue入门笔记: 二不懂知识点汇总与解决