Vue 2.6版本基础知识概要

Posted 2021-02-13 sanchang

挂载组件

//将 App组件挂载到div#app节点里
new Vue({
  render: h => h(App),
}).$mount('#app')

VueComponent.$mount

封装组件

<template>
  <div id="app">
    Hello Vue
  </div>
</template>

<script>
export default {
  name: 'app',
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

1 Vue组件文件以.vue 结尾;

2 Vue组件模版，将html,css,js分别抽离到 tempplate ,style ,script ，各司其职，层次分明;

3 Vue实现css模块化的方式，是 scoped属性，style scoped ,其原理与css-module类似，以多位hash值避免命名冲突(所以依然存在冲突的可能性);

4 Vue实现数据双向绑定, 指令 v-model = ‘dataOrPropName‘,即绑定props对象或data对象的key。因此，props与data的key命名不可冲突；

5 Vue实现列表渲染的关键指令是 v-for:"item in list" ,v-for属性对当前标签起作用,为了diff算法依赖key值遍历比对的实现，应当同时添加 v-bind:key = ‘renewableVariat‘绑定key值 ;

6 Vue组件实现父子组件间通信:

<template>
  <div id="app">
    <HelloWorld v-bind:msg='msg' v-bind:click='getDataFormChild'/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  methods:{
    getDataFormChild:(zz,yy)=>{
      console.log(zz,yy);
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

如代码所示，单向数据流父传子依然是通过props传递信息，通过v-bind实现变量的传值，子组件可通过调用父组件定义的方法并传参，实现数据的逆向传递；

7 注意定义data的方式：

 data:()=>({
    msg:'hello, vue'
  }),

如代码所示，data为函数，最终返回一个data对象。（这里应考虑返回data对象的函数如果为异步的情形）;

8 :

<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
  name: 'app',
  components: {
    HelloWorld
  },
  props: {
    msg: String,
    click: Function
  },
  data:()=>({
    msg:'hello, vue'
  }),
  methods:{
    getDataFormChild:(zz,yy)=>{
      console.log(zz,yy);
    }
  }
}
</script>

如代码所示，在js中引入依赖组件,最终暴露的是一个Vue组件的配置对象,其中，components为引入的组件集对象，data为函数，return出一个data对象，methods是方法集对象 ，props里为props类型检测对象。

9 注意所有js集或框架的类型检测，都是 弱类型(源于js)的静态/动态类型检测: 静态-指代码运行时才进行检测; 动态-指代码编译时就进行检测(如ts);

10 Vue其他丰富的指令及封装指令的方式;

11 Vue提供的组件通信的多种api；

12 Vue-router ， vuex等插件的使用;

13 vue 配合node 实现 ssr;

14 vue 配合node 实现部分同构；

15 vue底层源码的消化;

16 基于vue手封实现vuex的功能;

17 拥抱新版本，全面面向es6，深刻学习proxy(替代Object.defineProperty)及class(替代构造函数)的使用;

18 基于Vue指令的思想，写react继承类高阶组件基于React.Component实现多个指令;