VUE3 learning notes

1. composition, vue3

2. vite, compare (extend)

3. as a window( like thought) 

 what do the VUE source codes bring us?

How to learn VUE source code? Knowledge archetecture

Soft skills

Frontend reception room -- Need attention

Main mission/Side mission

| assign permission

& check

Element 

Vue和核心理念

1. 数据驱动应用（数据响应式）

2. MVVM（model view viewmodel）用户只需使用，在viewmodel中有模板和数据模型 （模板引擎及渲染）

Vue中不需要修改dom操作，只需更新数据来改变程序。

渲染函数（虚拟DOM，比对）

Chrome 调试memory leak问题

auth0.com/blog/four-t…

VUE组件化的分类

1. 通用组件

     实现最基本的功能，具有通用性、复用性

2. 业务组件

     完成具体业务

3. 页面组件

     组织应用各部分独立内容

组件的本质

    VueComponent的实例，功能更加内聚，增加代码的复用性、可维护性和可测试性。

    最终产生虚拟DOM

从无到有

1 安装node/npm

2. npm add vue vuex vue-router

3. 创建项目vue create firstapp

4. 启动项目应用 cd firstapp； yarn serve

认识Vue Router

Vue Router是个插件，先在插件的模块文件中定义router配置，生成一个VueRouter实例，再将其导出（作为单实例来使用）。main.js 来使用VueRouter

import router from './router'

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

VueRouter实现了两个组件router-view和router-link

通过this.$router.push(url)实现跳转

问题：1 为什么点击router-link后会在router-view中变化？

利用vue响应式，当current变化后，router-view进行变化

2. vue中插件如何实现？

vue插件可以是funciton或class；要求必须有install，将来会被vue use 调用

let Vue

class VueRouter {
}

VueRouter.install = function(_Vue) {
  Vue = _Vue;
}