vue3官方中文文档 vue官网中文文档
本篇文章给大家谈谈vue3官方中文文档，以及vue官网中文文档对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
vue3+vite中怎么解析md文档
在 Vue3+ Vite项目中解析 Markdown文档，可以通过以下步骤实现，并支持更灵活的定制化配置：
1.安装核心依赖npm install markdown-it--save如需扩展功能（如代码高亮、表格等），可安装插件：
npm install@types/markdown-it markdown-it-highlightjs markdown-it-table-of-contents2.基础解析实现方式一：组件内直接解析<template><div v-html="renderedMarkdown"></div></template><script setup>import{ ref, computed} from'vue';import MarkdownIt from'markdown-it';const md= new MarkdownIt();const markdownContent= ref('#标题n-列表项n加粗文本');const renderedMarkdown= computed(()=> md.render(markdownContent.value));</script>方式二：封装为可复用工具函数// src/utils/markdownParser.jsimport MarkdownIt from'markdown-it';export function createMarkdownParser(options={}){ const md= new MarkdownIt(options);//可选：添加插件（如代码高亮） if(options.highlight){ md.use(require('markdown-it-highlightjs'), options.highlight);} return{ render:(text)=> md.render(text)};}3.进阶配置代码高亮与自定义规则const md= new MarkdownIt({ html: true,//允许HTML标签 linkify: true,//自动转换URL为链接 breaks: true//换行符转为<br>}).use(require('markdown-it-highlightjs'),{ auto: true, code: true});//自定义规则示例：替换所有 `!!warning!!`为红色文本md.inline.ruler.push('warning',(state)=>{ const regex=/!!warning!!/g; let match; while((match= regex.exec(state.src))){ const token= state.push('text','', 0); token.content='<span style="color: red">警告内容</span>';} return true;});4.动态加载 Markdown文件步骤 1：配置 Vite支持.md文件// vite.config.jsimport{ defineConfig} from'vite';export default defineConfig({ assetsInclude: ['/*.md']});步骤 2：通过 fetch或 import加载文件<script setup>import{ ref, onMounted} from'vue';import{ createMarkdownParser} from'@/utils/markdownParser';const mdParser= createMarkdownParser({ highlight: true});const content= ref('');onMounted(async()=>{ const response= await fetch('/path/to/file.md'); const markdownText= await response.text(); content.value= mdParser.render(markdownText);});</script><template><div v-html="content" class="markdown-body"></div></template>5.安全注意事项XSS防护：v-html会直接渲染 HTML，确保 Markdown内容来源可信，或使用 DOMPurify过滤：npm install dompurifyimport DOMPurify from'dompurify';const safeHtml= DOMPurify.sanitize(md.render(markdown));6.完整示例（含样式）<template><article class="prose max-w-none" v-html="renderedContent"></article></template><script setup>import{ ref} from'vue';import MarkdownIt from'markdown-it';import'highlight.js/styles/github.css';//代码高亮样式const md= new MarkdownIt({ html: true, highlight:(str, lang)=>{ if(lang&& hljs.getLanguage(lang)){ try{ return hljs.highlight(str,{ language: lang}).value;} catch(e){}} return'';//使用默认转义}});const markdownText= ref(`#标题```javascriptconsole.log('Hello, Markdown!');````);const renderedContent= ref(md.render(markdownText.value));</script><style>/*可选：添加Markdown样式（如Tailwind CSS的prose类）*/.prose{@apply leading-relaxed;}.prose h1{@apply text-3xl font-bold mb-4;}</style>总结基础解析：使用 markdown-it的 render()方法。扩展功能：通过插件支持代码高亮、目录生成等。动态加载：结合 Vite的静态资源处理或 fetch实现。安全：务必对动态内容使用 DOMPurify过滤。根据项目需求选择合适的方式，复杂场景建议封装为独立模块。
vue3特性笔记
我们把vue3和 vue2的项目进行对比来去说明
综上所述，在 vue3的初始化项目中，与 vue2对比的最大差异其实就是两点：
setup函数也是 Composition API的入口函数，我们的变量、方法都是在该函数里定义的，不再使用vue2中的data而是setup。
reactive方法是用来创建一个响应式的数据对象，该API也很好地解决了Vue2通过 defineProperty实现数据响应式的缺陷
上面使用name必须state.name，不方便，另一个解决办法如下
执行 setup时，组件实例尚未被创建。因此，你只能访问以下 property： props attrs slots emit
换句话说，你将无法访问以下组件选项：
data computed methods
在Vue3中，这些生命周期部分有所变化，并且调用的方式也有所改变
Ts可指定类型，而不是以往所有对象参数都是object的any类型
另外Props可以提出来
h函数只是createVNode的简单封装，所以把h函数替换为createVNode也是一样的
ref就是通过 reactive包装了一个对象，然后是将值传给该对象中的 value属性，这也就解释了为什么每次访问时我们都需要加上.value。
我们可以简单地把 ref(obj)理解为这个样子 reactive({value: obj})
watch和 watchEffect都是用来监视某项数据变化从而执行指定的操作的，但用法上还是有所区别
watchEffect：
1、不需要手动传入依赖
2、每次初始化时会执行一次回调函数来自动获取依赖
3、无法获取到原值，只能得到变化后的值
vue3教程
返回一个提供应用上下文的应用实例。应用实例挂载的整个组件树共享同一个上下文。
创建组件
或者是一个 setup函数，函数名称将作为组件名称来使用
创建一个异步加载组件
//高阶组件
在当前应用中查找组件，只能在 render或 setup函数中使用。
查找组件
在当前应用中查找指令，只能在 render或 setup函数中使用。
将回调推迟到下一个 DOM更新周期之后执行。在更改了一些数据以等待 DOM更新后立即使用它。
vue2.x的生命周期
vue3的生命周期
与 2.x版本生命周期相对应的组合式 API
新增的钩子函数
组合式 API还提供了以下调试钩子函数：
把一个响应式对象转换成普通对象，该普通对象的每个 property都是一个 ref
应用:当从合成函数返回响应式对象时，toRefs非常有用，这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用
问题: reactive对象取出的所有属性值都是非响应式的
解决:利用 toRefs可以将一个响应式 reactive对象的所有原始属性转换为响应式的 ref属性
利用ref函数获取组件中的标签元素
功能需求:让输入框自动获取焦点
关于vue3官方中文文档的内容到此结束，希望对大家有所帮助。