vue3文档学习

1.vue的核心功能

1.声明式渲染
2.响应性： vue会自动跟踪JavaScript状态并在其发生变化时响应式的更新DOM。

2.渐进式框架

根据不同的需求场景，可以用不同的方式使用vue：
  1.无需构建步骤，渐进式增强静态的HTML;
  2.在任何页面中作为 Web Components 嵌入;
  3.单页应用 (SPA);
  4.全栈 / 服务端渲染 (SSR);
  5.Jamstack / 静态站点生成 (SSG);
  6.开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

3.SFC(single-file-components) - 单文件组件

即：
<template></template>
<script></script>
<style scoped></style>

4.API风格

即： 选项式API和组合式API。

选项式API：
   使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

组合式API:
   通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识，
   告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

5.安装流程

前提： nodejs最新版本
然后执行： npm init vue@latest  =>这个命令是安装并执行 create-vue；
...
安装依赖： npm install
运行： npm run dev 

6.创建一个应用

每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例：
import { createApp } from 'vue' 
// 从一个单文件组件中导入根组件
import App from './App.vue'
const app = createApp({ 
  /* 根组件选项 */ 
  App
})
app.mount('#app');

App.vue页面：
<div id="app"></div>

挂载应用：
   应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串。

7.模板语法

文本插值：
   最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：
   <span>{{message}}</span>

原始HTML：
   双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令：
   <span v-html="rawHtml"></span>

Attribute绑定：
   双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令：
   <span v-bind:id="id"></span>
   <span :id="id"></span>

动态绑定多个值：
   const objAttributes = {
     id: 'container',
     class: 'hello'
   }
   通过不带参数的 v-bind，你可以将它们绑定到单个元素上：
   <div v-bind="objAttributes"></div>

使用JavaScript表达式：
 在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：
   1.在文本插值中 (双大括号)
   2.在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中

8.响应式基础

 声明响应式状态：
    使用 reactive() 函数创建一个响应式对象或数组：
    import { reactive } from 'vue'  
    const state = reactive({ count: 0 })

DOM更新时机：
   当你更改响应式状态后，DOM 会自动更新。然而，你得注意 DOM 的更新并不是同步的。相反，Vue 将缓冲它们直到更新周期的 “下个时机” 以确保无论你进行了多少次状态更改，每个组件都只需要更新一次。
   若要等待一个状态改变后的 DOM 更新完成，你可以使用 nextTick() 这个全局 API：
   import { nextTick } from 'vue'  
   function increment() {  
     state.count++  
     nextTick(() => {  
       // 访问更新后的 DOM  
     }) 
   }

深层响应式：
   在 Vue 中，状态都是默认深层响应式的。这意味着即使在更改深层次的对象或数组，你的改动也能被检测到。
   值得注意的是，reactive() 返回的是一个原始对象的 Proxy，它和原始对象是不相等的：
   const raw = {} 
   const proxy = reactive(raw)  

// 代理对象和原始对象不是全等的 
console.log(proxy === raw) // false

9.自定义事件配合v-model使用

<input v-model="searchText" />
等价于(编译器会对 v-model进行展开)
<input :value="searchText" @input="searchText = $event.target.value" />

而当使用在一个组件上时，v-model会被展开为如下的形式：
<CustomInput
 :modelValue="searchText"
 @update:modelValue="newValue => searchText = newValue"
/>
在刚刚这个例子中，<CustomInput>组件内部需要做两件事：
1.将内部原生input元素的value  attribute绑定到 modelValue  prop.
2.输入新的值时在 input 元素上触发 update:modelValue 事件。
CustomInput.vue：
<script setup>
defineProps(['modelValue']);
defineEmits(['update:modelValue'])
</script>
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
   />
</template>

10.依赖注入

prop 逐级透传问题

背景：当从父组件向子组件传递数据时，会用到props，有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个
深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅用props则必须将其沿着组件链逐级传递
下去，这样非常麻烦。

provide 和 inject 可以解决这一问题。一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件
树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。

<script setup> // provide提供
import {provide} from 'vue';

provide('message', 'hello');// 第一个参数是 注入名，第二个参数是 值。
</script>
<script seup>// inject注入
import {inject} from 'vue'

const message = inject('message');
</script>

11.异步组件

defineAsyncComponent

背景描述： 在大型项目中，需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。

import { defineAsyncComponent } from 'vue';
const AsyncComp = defineAsyncComponent(()=>{
  return new Promise((resolve, reject)=>{
    //...从服务器获取组件
    resolve(/*获取到的组件*/)
  })
  OR //或者直接导入vue单文件组件
  import('./components/AdminPageComponent.vue')
})
// ...像使用其他一般组件一样使用 AsyncComp

12.自定义组件

例如：
<script setup>
//在模板中启用 v-focus
const vFocus = {
  mounted:(el)=>el.focus()
}
</script>
<template>
  <input v-focus />
</template>

指令钩子： 一个指令的定义对象可以提供几种钩子函数
const myDirective = {
  //在绑定元素的 attribute前
  //或事件监听器应用前调用
  created(el, binding, vnode, prevVnode){
    el: 指令绑定到的元素。可以用于直接操作DOM。
    binding：一个对象，包含 value，oldValue等属性。
    vnode:代表绑定元素的底层VNode。
    prevNode:之前的渲染中代表指令所绑定元素的VNode。
  },
  //在元素被插入到DOM钱调用
  beforeMount(el, binding, vnode, prevVnode){},
  //在绑定元素的父组件及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode){},
  //绑定元素的父组件更新前调用
  beforeUpdate(el, binding,vnode,prevVnode){},
  //在绑定元素的父组件及他自己的所有子节点都更新后调用
  updated(el,binding,vnode,prevVnode){},
  //绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode){},
  //绑定元素的父组件卸载后调用
  unmounted(el,binding,vnode,prevVnode){}
}

例子：
<div v-color="color"></div>
app.directive('color',(el,binding)=>{
  el.style.color = binding.color;
})

13.KeepAlive

<component>元素来实现动态组件的用法：
// 非活跃的组件将会被缓存
<KeepAlive>
  <component is="activeComponent" />
</KeepAlive>

<KeepAlive>默认会缓存内部的所有组件实例，也可以通过 include和 exclude 
prop 来定制该行为。
例如：
include='a,b'  OR  :include='/a|b/' OR  :include="['a','b']" 会根据组件的name选项进行匹配。
:max="10" 最大缓存实例数

缓存实例的生命周期：
 onActivated()和 onDeactivated()注册相应的两个状态的生命周期钩子
 import { onActivated, onDeactivated } from 'vue';
 onActivated(()=>{
   //调用时机为首次挂载以及每次从缓存中被重新插入时
 })
 onDeactivated(()=>{
   //在从DOM上移除，进入缓存以及组件卸载时调用
 })

14.Teleport

<Teleport>是一个内置组件，可以将一个组件内部的一部分模板 传送 到该组件的DOM结构外层的位置去。

15.路由

服务端路由指的是 服务器根据用户访问的URL路径返回不同的响应结果。

在单页面应用中，客户端的JavaScript可以拦截页面的跳转请求，动态获取新的数据，无需重新加载就可更新当前页面。
一个客户端路由器利用 History API 或是 hashchange 事件这样的浏览器API来管理应用当前应该渲染的视图。

vue默认路由模式是 hash 模式，hash模式背后的原理是 onhashchange事件，可以在window对象上监听这个事件。
hash发生变化的URL都会被浏览器记录下来。hashchange只能改变#后面的url片段。
在hash模式下，前端路由修改的是#中的信息，而浏览器请求时不带它玩，所以刷新的话不存在问题。

history路由：
   切换历史状态：back();//后退 forward();//前进 go(2);//前进两次
   修改历史状态： pushState, replaceState；接收三个参数： stateObj, title, url
      通过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state
      取到这个state对象，从而可以对页面状态进行还原。
      无#标识。
      不能刷新，因为刷新是去请求服务器。如果服务器中没有相应的响应或者资源，会报404.

16.状态管理

组成部分：状态，视图，交互。

Pinia用法
创建一个store：
  // stores/counter.js
  import{ defineStore } from 'pinia';
  export const useCounterStore = defineStore('counter',{
    state: ()=>{
      return { count: 0, todos: [] }
    },// 也可这样定义 state:()=>({ count: 0 })
    actions: {
      increment(){ this.count++ },
      addTodo(text){
        this.todos.push({ text, id:this.nextId++, isFinished:false })
      }
    },
    getters: {
      finishedTodos(state){
        return state.todos.filter((todo)=>todo.isFinished)
      }
    }
  })

//然后在一个组件使用这个store
<script setup>
import { useCounterStore } from '@/stores/counter'
export default {
  const counter = useCounterStore();
  counter.count++;
  counter.$patch({ count: counter.count +1 }) 
  //或者使用action替代
  counter.increment();
}
</script>

pinia优点：
  1.mutation已弃用；
  2.无需动态添加Store
  3.不再有可命名的模块
  4.不再有嵌套结构的模块