Chenh

### 命令式与声明式
- 命令式
	每一步都直接使用js原生实现
- 声明式
	先列举要做什么，在编译过程再自动生成逻辑
tip. 牺牲性能，提升编程体验。

### 虚拟DOM
- 虚拟DOM是真实DOM的一个JS对象抽象。其中虚拟DOM即JS对象。
- 真实DOM的属性众多，直接操作DOM，对浏览器的检索压力太大，性能不足。因此使用虚拟DOM，再通过虚拟DOM的变化（diff）去映射操作真实DOM，以提高性能。
- 在Vue中，虚拟DOM的组成部分就是VNode（js对象），每一个VNode拥有children - VNode数组，这样就构成一个树形结构，这便是虚拟DOM树。
- VNode.elm 指向了真实 Node， VNode.context 指向vue实例

### 运行时与编译时
- 运行时
	- 使用render渲染函数将虚拟DOM直接转换为真实DOM
	- 运行时 有一定性能支出
	- 虚拟DOM与真实DOM结构类似，是直接的映射关系，无法分析用户提供的内容。
- 编译时
	- 解析Template模板内容，转化为真实DOM
	- 编译过程可以读取模板语法，可以分析用户内容。
	- 性能较佳
- 运行时+编译时 Vue
	- 利用template模板，生成render函数
	- 使用render函数将虚拟DOM转化为真实DOM

### Vue UI
- 模板描述 声明式
- render函数 命令式 render函数（h函数）返回值是一个虚拟DOM（VNode）
### 初始渲染器
- renderer 对象 使用函数 createRenderer 生成
- 参数： 虚拟DOM对象（VNode） 挂载容器（真实DOM元素）
- renderer 作用是将虚拟DOM挂载在真实DOM元素上
### 区分
- render是vue提供给用户，操作虚拟DOM的途径
- renderer 是vue将虚拟DOM转化为真实DOM的工具

### 副作用函数 与 响应式数据
1. 拥有一个全局变量 A，它被函数innerText与视图关联。
2. 当我们修改了变量A，关联元素并不会更新
3. 只有再一次执行 innerText，视图才会更新
- 我们称 innerText 就是 副作用函数。
- 这个涉及视图变化的变量A 就是响应式数据

### 核心逻辑
- 必须有 setter getter / 访问器
- 类似高级语言中的 访问器，虚拟DOM对象 以及 数据对象 都可以使用访问器，来实现类似高级语言中的数据绑定模式。
### 基本原理
- getter: 响应式数据
	当触发读取操作，则将该副作用函数列入“名单”
- setter: 响应式数据
	当触发设置操作，再次执行副作用函数以更新视图
### 实现原理
- Vue2 中 使用 Object.defineProperty()
- Vue3 中 使用 Proxy() Reflect

### 响应性调度
- 当响应数据发生变化，副作用函数”名单“被执行，那么控制”名单“的执行顺序，就很重要。
- 响应性调度的关键在于 异步编程Promise 队列模型jobQueue
- **惰性执行** 
- **计算属性** 也依赖于调度系统
- watch 监听器，当监听对象发生变化，执行回调。
- 当监听器的回调中有异步操作，则可能导致执行结果不符合预期，使用 onInvalidate() 停止过期的异步请求。
### 实现
- 对象的响应性 Proxy + Reflect
- 非对象的响应性（基本类型） ref

### DSL 编译器
- 特定语言编译器
- 本质是 将模板 编译为 render 渲染函数
1. parse 模板 -> AST对象
2. transform  AST -> JavascriptAST
3. generate  JsAST -> render函数

## 指令
- 是指带有·v-·前缀的特殊属性，
- 指令的期望值是 js表达式，用来在表达式发生变化时响应更新DOM
- `v-bind:href="xxx.api"`后可以带 指令参数
- `:[attributeObj]="xxx.api"` 参数可以时动态的，但表达式需要用方括号包围
- ** HTML 中的字符会自动处理为小写，且不可以为空格 **
- ** 推荐使用 计算属性**

** 使用组合式API **

import { reactive } from 'vue'
const state = reactive({ count: 0 })

import { reactive } from 'vue'
// 组件的默认行为
export default {
  // setup 用于组合式 API 的钩子函数
  setup(){
    // 定义 响应式对象
    const state = reactive({ count: 0 })
    // 定义 方法
    function increment(){
      state.count++
      // 全局API 更新DOM的下一个Tick
      nextTick(()=>{
        // xxx
      })
    }
    // 暴露 state 到模板
    return {state, increment}
  }
}

<template>
	<button @click="increment">
    {{ state.count }}
  </button>
</template>

<script setup>
	import {ref} from 'vue'
  const count = ref(0)
  function increment(){
    count.value++
  }
  const obj = { foo: ref(1) }
</script>
<template>
	<button @click="increment">
    {{ count }}
  </button>
	<button>
    {{ obj.foo + 1 }} <!--[object:object]1 -->
  </button>
</template>

<script setup>
  import { reactive, d } from 'vue'
  const author = reactive({
    name: 'John Doe',
    books: [
      'Vue 2' - 'Advanced Guide',
      'Vue 3' - 'Advanced Guide',
      'Vue 4' - 'Advanced Guide',
    ]
  })
  // 响应式计算属性
  const publishedBooksMessage = computed(()=>{
    return author.books.length > 0 ? 'Yes':'No'
  })
</script>
<template>
	<p>
    Has Publiched books:
  </p>
	<span>{{ author.books.length > 0? 'Yes':'No'}}</span>
	<span>{{ publishedBooksMessage }}</span>
</template>

<script setup>
	import { reactive, ref } from 'vue'
  
  const isActive = ref(true)
  const hasError = ref(false)
  
  const classObject = reactive({
    active: true,
    'text-danger': false
  })
  const classComput = computed(()=>({
    active: isActive.value && !error.value,
    'text-danger': error.value && error.value.type ==='fatal'
  }))
</script>
<template>
	<div class="static" :class="{ active: isActive, 'text-danger': hasError }"> 绑定ref元素	</div>
  <div :class="classObject"> 绑定对象 </div>
	<div :class="classComput"> 绑定计算属性 </div>
	<div :class="[isActive ? activeClass : '', errorClass]"> 绑定对象数组 </div>
</template>

<script setup>
	import { reactive, ref } from 'vue'
  
  const activeColor = ref('red')
  const fontSize = ref(30)
  
  const styleObject = reactive({
    color: 'red',
    fontSize: '13px'
  })
</script>
<template>
	<div :style="{ color: activeColor, fontSize: fontSize + 'px'}"> 驼峰命名的style元素 </div>
	<div :style="{ 'font-size': fontSize + 'px' }"> 短横风格的实际style-key名称 </div>
	<div :style="styleObject"> 绑定对象 </div>
	<div :style="[baseStyles, overridingStyles]"> 绑定数组 </div>
</template>

<script setup>
import { ref } from 'vue'

const awesome = ref(true)
</script>

<template>
  <button @click="awesome = !awesome">toggle</button>
	<template v-if="awesome">
    <h1>Vue is awesome!</h1>
    <h1>Oh no 😢</h1>
  </template>
</template>

<script setup>
	import { reactive, ref } from 'vue'
  const items = ref([{message: 'foo'}, {message: 'bar'}])
  const object = reactive({
    title: "how to do lists in Vue",
    author: 'Jane Doe',
    publishedAt: '2016-04-10'
  })
</script>
<!-- v-for 在模板中可用 -->
<template v-for="it in 1">
	<li v-for="n in 10">{{n}}</li>
	<!-- 重复元素中，可以完整访问父作用域的属性和变量，item则只在内部 -->
	<li v-for="item in items">{{item.message}}</li>
	<!-- 遍历对象，返回对象所有属性，顺序基于 Object.keys -->
	<li v-for="value in object">{{value}}</li>
	<!-- 遍历对象，返回两/三个参数 -->
	<li v-for="(value, key, index) in object">{{key}}:{{value}}</li>
</template>

<script setup>
	// ...
  const count = ref(0)
</script>
<template>
	<button @click="count++">
    Add 1
  </button>
	<p>
    Count is: {{ count }}
  </p>
</template>

<script setup>
	const name = ref('world!')
  
  function greet(event){
    alert('Hello ${name.value}')
    // event是DOM原生事件
    if(even){
      // 使用 event.target 获取原生事件对象
      alert(event.target.tagName)
    }
  }
</script>
<template>
	<!-- greet -->
	<button @click="greet">
    Greet
  </button>
</template>

<input :value='text'
       @input="event => text=event.target.value">

<input v-model="text">

<!-- ☑️ true 🔲 false -->
<!-- :true-value :false-value -->
<input type='checkbox' v-model="checked"/>
<label for="chekcbox">{{ checked }}</label>

<!-- 选中的项目的value会被添加到数组中 -->
<script setup>
	const checkNames = ref([])
</script>
<template>
	<div>
    Checked Names: {{ checkNames }}
  </div>
	<input type="checkbox" value="Jack" v-model="checkNames">
	<label for="jack">Jack</label>
	<input type="checkbox" value="Tom" v-model="checkNames">
	<label for="jack">Jack</label>
	<input type="checkbox" value="Mike" v-model="checkNames">
	<label for="jack">Jack</label>
</template>

<div>
  Picked: {{picked}}
</div>
<input type='radio' value="One" v-model="picked"/>
<input type='radio' value="Two" v-model="picked"/>
<!-- vue使用Value值来区别不同按钮 -->

<div>Selected: {{ selected }}</div>

<select v-model="selected">
  <!-- 推荐提供一个空值的禁用选项 -->
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<script setup>
	import {ref, watch} from 'vue'
  const question = ref('')
  const answer = ref('Questions usually contain ...')
  const myobj = reactive({ count: 0 })
  
  watch(question, async(newvalue, oldvalue)=>{...})
  // 注意，对于一个响应式对象，不可以监听其成员，因为得到的是一个值
  // 应该使用 Getter 函数
  watch(()=>myobj.count,(count)=>{ ... })
</script>

<script setup>
  import { reactive } from 'vue'
	const obj = reactive({ count:0 })
  watch(obj,()=>{
    // 自动启用深层监听
  })
  watch(()=>obj,(newv,oldv)=>{
    // 只有返回不同的obj对象，才会触发。
  },{deep:true/* 强制转为深层监听 */})
</script>

<script setup>
	const todoId = ref(1)
  const data = ref(null)
  
  watch(todoId, async()=>{
    const response = await fetch(
    	'https://xxx.xxx.com/api/todos/${todoId.value}'
    )
    data.value = await response.json()
  },{immediate:true})
  // 等价于
  watchEffect(async()=>{
    // ...
  })
</script>

<script setup>
	import {ref, onMounted} from 'vue'
  
  // 声明一个引用 ref 来存放模板引用
  const input = ref(null)
  onMounted(()=>{
    input.value.focus()
  })
</script>
<template>
	<!-- ref 名称必须和 脚本中的变量名相同。 -->
	<input ref="input"/>
</template>

<input :ref="(el)=>{ ... }"/>

<script setup>
	defineProps(['title'])
</script>
<template>
	<h4>
    {{ title }}
  </h4>
</template>

export default {
  props: ['title'],
  // 必须将props作为参数传入setup
  setup(props) {
    console.log(props.title)
  }
}

<script setup>
	import AlertBox from '/alertbox.vue'
</script>
<template>
	<AlertBox>
  	The Slot Message.
  </AlertBox>
</template>

<!-- 这里是 alertbox.vue 子组件 -->
<template>
	<slot/>
</template>

<!-- App.vue -->
<script>
	import { createApp } from 'vue'
  import MyComponent from './mycomponent.vue'
  const app = createApp({})
  // 1. 直接注册
  app.component('componentName', {/* 组件实现 */})
  // 2. 单文件注册
  app.component('componentName', MyComponent)
  // 3. 可链式调用
  app
    .component('componentName', MyComponent)
    .component('componentName', MyComponent)
    .component('componentName', MyComponent)
</script>

<script setup>
	defineProps({
    title: String,
    likes: Number
  })
  export default {
    props: {
      title: String,
      likes: Number
    }
  }
</script>

import { createApp } from 'vue'
import { createStore } from 'vuex'

const store = createStore({
  state(){
    return {
      count: 0
    }
  },
  mutations: {
    increment(state){
      state.count++
    }
  }
})
const app = createApp({})
app.use(store)
// 使用 store.commit('name') 触发状态变更
// 使用 store.state 获取对象
// 在所有VUE组件中，使用 this.$store 访问store实例 （选项式）
// 在setup中导入useStore，并使用其访问store。 （组合式）

<p>
  <router-link to="/">GO to home</router-link>
  <router-link to="/about">Go to About</router-link>
</p>
<router-view>路由出口</router-view>

// 1. 示例组件
const Home = {template: '<div>Home</div>'}
const About = {template: '<div>About</div>'}
// 2. 定义路由对象
// 每一个路由对象都包含一个路径，以及组件
const routes = [
  {path:'/', component: Home},
  {path:'/about', component: About},
]
// 3. 创建路由实例，设置路由配置。
const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes, // => routes: routes
})

// 将路由挂载到 vueApp
const app = Vue.createApp({})
app.use(router)
app.mount("#app")

const routes = [
  {path:'/:pathMatch(.*)*'}
]

const router = createRouter({
  // ... 
  routes: [/* ... */],
  strict: true,
  sensitive: true,
})

<template>
	<router-link :to="{ name: 'user', params: { username: 'erina' }}">
  User
	</router-link>
</template>
<script>
	router.push({ name: 'user', params: { username: 'erina' } })
</script>

// 向前移动一条记录，与 router.forward() 相同
router.go(1)

// 返回一条记录，与 router.back() 相同
router.go(-1)

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)

<template>
  <router-view class="view left-sidebar" name="LeftSidebar"></router-view>
  <router-view class="view main-content"></router-view>
  <router-view class="view right-sidebar" name="RightSidebar"></router-view>
</template>
<script></script>

{
  // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // 默认值

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 数组中最后一个函数必须返回一个字符串， 一个Buffer实例，ArrayBuffer，FormData，或 Stream
  // 你可以修改请求头。
  transformRequest: [function (data, headers) {
    // 对发送的 data 进行任意转换处理

    return data;
  }],

  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对接收的 data 进行任意转换处理

    return data;
  }],

  // 自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 是与请求一起发送的 URL 参数
  // 必须是一个简单对象或 URLSearchParams 对象
  params: {
    ID: 12345
  },

  // `paramsSerializer`是可选方法，主要用于序列化`params`
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function (params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

  // `data` 是作为请求体被发送的数据
  // 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
  // 在没有设置 `transformRequest` 时，则必须是以下类型之一:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属: FormData, File, Blob
  // - Node 专属: Stream, Buffer
  data: {
    firstName: 'Fred'
  },
  
  // 发送请求体数据的可选语法
  // 请求方式 post
  // 只有 value 会被发送，key 则不会
  data: 'Country=Brasil&City=Belo Horizonte',

  // `timeout` 指定请求超时的毫秒数。
  // 如果请求时间超过 `timeout` 的值，则请求会被中断
  timeout: 1000, // 默认值是 `0` (永不超时)

  // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false, // default

  // `adapter` 允许自定义处理请求，这使测试更加容易。
  // 返回一个 promise 并提供一个有效的响应 （参见 lib/adapters/README.md）。
  adapter: function (config) {
    /* ... */
  },

  // `auth` HTTP Basic Auth
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

  // `responseType` 表示浏览器将要响应的数据类型
  // 选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'
  // 浏览器专属：'blob'
  responseType: 'json', // 默认值

  // `responseEncoding` 表示用于解码响应的编码 (Node.js 专属)
  // 注意：忽略 `responseType` 的值为 'stream'，或者是客户端请求
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  responseEncoding: 'utf8', // 默认值

  // `xsrfCookieName` 是 xsrf token 的值，被用作 cookie 的名称
  xsrfCookieName: 'XSRF-TOKEN', // 默认值

  // `xsrfHeaderName` 是带有 xsrf token 值的http 请求头名称
  xsrfHeaderName: 'X-XSRF-TOKEN', // 默认值

  // `onUploadProgress` 允许为上传处理进度事件
  // 浏览器专属
  onUploadProgress: function (progressEvent) {
    // 处理原生进度事件
  },

  // `onDownloadProgress` 允许为下载处理进度事件
  // 浏览器专属
  onDownloadProgress: function (progressEvent) {
    // 处理原生进度事件
  },

  // `maxContentLength` 定义了node.js中允许的HTTP响应内容的最大字节数
  maxContentLength: 2000,

  // `maxBodyLength`（仅Node）定义允许的http请求内容的最大字节数
  maxBodyLength: 2000,

  // `validateStatus` 定义了对于给定的 HTTP状态码是 resolve 还是 reject promise。
  // 如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，
  // 则promise 将会 resolved，否则是 rejected。
  validateStatus: function (status) {
    return status >= 200 && status < 300; // 默认值
  },

  // `maxRedirects` 定义了在node.js中要遵循的最大重定向数。
  // 如果设置为0，则不会进行重定向
  maxRedirects: 5, // 默认值

  // `socketPath` 定义了在node.js中使用的UNIX套接字。
  // e.g. '/var/run/docker.sock' 发送请求到 docker 守护进程。
  // 只能指定 `socketPath` 或 `proxy` 。
  // 若都指定，这使用 `socketPath` 。
  socketPath: null, // default

  // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
  // and https requests, respectively, in node.js. This allows options to be added like
  // `keepAlive` that are not enabled by default.
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // `proxy` 定义了代理服务器的主机名，端口和协议。
  // 您可以使用常规的`http_proxy` 和 `https_proxy` 环境变量。
  // 使用 `false` 可以禁用代理功能，同时环境变量也会被忽略。
  // `auth`表示应使用HTTP Basic auth连接到代理，并且提供凭据。
  // 这将设置一个 `Proxy-Authorization` 请求头，它会覆盖 `headers` 中已存在的自定义 `Proxy-Authorization` 请求头。
  // 如果代理服务器使用 HTTPS，则必须设置 protocol 为`https`
  proxy: {
    protocol: 'https',
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

  // see https://axios-http.com/zh/docs/cancellation
  cancelToken: new CancelToken(function (cancel) {
  }),

  // `decompress` indicates whether or not the response body should be decompressed 
  // automatically. If set to `true` will also remove the 'content-encoding' header 
  // from the responses objects of all decompressed responses
  // - Node only (XHR cannot turn off decompression)
  decompress: true // 默认值

}

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 是服务器响应头
  // 所有的 header 名称都是小写，而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},

  // `config` 是 `axios` 请求的配置信息
  config: {},

  // `request` 是生成此响应的请求
  // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}
}

// 请求拦截 在发送请求前进行处理
axios.interceptors.request.use(function(config){
  // 发送前处理
  return config;
}, function(error){
  // 请求错误处理
  return Promise.reject(error);
});

// 响应拦截
axios.interceptors.response.use(function(response){
  // 2xx 状态码时
  return response;
}, function(error){
  // 超出 2xx
  return Promise.reject(error);
})

const myInterceptor = axios.interceptors.request.use(...)
axios.interceptors.request.eject(myInterceptor)

const instance = axios.create()
instance.interceptors.request.use()