vue3开发android vue3开发文档

1.vue的核心功能及安装

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

安装vue3：
  1.安装vue cli,下载最新版本的vue cli，并安装官方文档中的说明进行安装。
  2.安装vue3依赖项安装，可使用 npm/yarn进行安装，如： 
    npm install -g @vue/cli 
    npm install -g @vue/template-compiler
    npm install -g @vue/compiler-sfc
  3.vue3环境设置

vue3基础知识：
  vue3引入了一些新的概念和特性。包括组件化架构，状态管理，路由管理和响应式系统等。
  1.组件化架构： 组件化架构基于组件的应用程序结构。组件可以独立地定义，复用和更新。组件化架构使得vue3应用程序更加可复用，可维护等。如：

               Composition API：提供了简洁易用的方式编写组件，基于函数式编程概念，将组件拆分为多个函数，每个函数都负责一个部分，这些函数可组合一起，
                                形成完整的组件。
               Vuex3更新：用于管理应用程序状态的工具。包括 async actions, computed getters, depth property等等。
               Vue Router4更新：路由管理器，包括路由守卫，路由映射等。
               Vue CLI更新： vue cli用于创建和管理vue.js项目的命令行工具。

  2.状态管理： 即虚拟DOM，虚拟DOM是一种轻量级的DOM表示形式，只包含与当前视图相关的信息，从而提高性能。

             Vuex3更新；
             Vue-hormonal状态管理：用于管理应用程序状态的工具，基于vuex。

  3.路由管理：基于path的路由管理系统，使用vue3的路由管理来定义，管理和路由跳转。

            Vue Router4更新；
            Vuex3与路由管理： vuex3可与vue router4一起使用，用于管理应用程序的状态和路由
            路由守卫：用于在路由切换时执行自定义操作，可以在路由请求时被调用，并且可以访问当前路由对象和应用程序状态。
                    使用路由守卫，可以执行异步操作，验证用户身份等等。
            路由映射： 使用路由映射，可将一个路由映射到另一个路由。

  4.响应式系统：可通过订阅数据来管理应用程序状态。使程序更加灵活，支持动态数据更新。

            Vuex3更新： 
                async actions - 运行在异步操作时执行自定义操作。可以在vuex的状态管理中定义async actions并在它们执行时执行自定义操作。
                computed getters - 允许从状态中检索计算属性。计算属性是一种特殊类型的组件，可以检索状态并根据状态进行计算。
                                 使用computed getters,可以定义计算属性，无需手动管理状态。
                depth property - 是一种新的状态属性，允许在嵌套状态中设置深度。
                响应式系统与计算属性 - 响应式系统可创建和管理状态，计算属性可检索状态并根据状态进行计算。
                响应式系统与订阅模式 - 订阅模式可创建和管理订阅，订阅是一种特殊类型的组件，可订阅状态的变化，并在状态变化时执行自定义操作。

2.渐进式框架

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

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

即：<script>cript>

4.API风格

data
methods
mounted
this<script setup>
setup<script setup>

5.安装流程

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

6.创建一个应用

createApp
.mount()

7.模板语法

v-html
v-bind
v-bind
v-

8.响应式基础

reactive()
reactive()

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

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

10.依赖注入

prop 逐级透传问题

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

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

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

const message = inject('message');cript>

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()
}cript>  指令钩子： 一个指令的定义对象可以提供几种钩子函数
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){}
}

例子：app.directive('color',(el,binding)=>{
  el.style.color = binding.color;
})

13.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

是一个内置组件，可以将一个组件内部的一部分模板 传送 到该组件的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();
}cript>

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

17.使用命令创建vue3项目

1.使用命令创建vue3项目，如：
  vue create 项目名称
2.使用命令安装项目的依赖，如：
  npm install -g @vue/cli
  npm run serve 启动项目