|
@@ -1,4 +1,82 @@
|
|
|
-1、reactive shallowreactive
|
|
|
+推荐的 IDE 配置是 [Visual Studio Code](https://code.visualstudio.com/) + [Vue - Official 扩展](https://marketplace.visualstudio.com/items?itemName=Vue.volar)。
|
|
|
+
|
|
|
+**Vue - Official 插件**
|
|
|
+* 在使用函数自动从 vue 中引入(import)
|
|
|
+
|
|
|
+# 创建项目
|
|
|
+
|
|
|
+## create-vue 创建
|
|
|
+
|
|
|
+```shell
|
|
|
+npm create vue@latest
|
|
|
+```
|
|
|
+这一指令将会安装并执行 [create-vue](https://github.com/vuejs/create-vue),它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示:
|
|
|
+
|
|
|
+```shell
|
|
|
+✔ Project name: … <your-project-name>
|
|
|
+✔ Add TypeScript? … No / Yes
|
|
|
+✔ Add JSX Support? … No / Yes
|
|
|
+✔ Add Vue Router for Single Page Application development? … No / Yes
|
|
|
+✔ Add Pinia for state management? … No / Yes
|
|
|
+✔ Add Vitest for Unit testing? … No / Yes
|
|
|
+✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
|
|
|
+✔ Add ESLint for code quality? … No / Yes
|
|
|
+✔ Add Prettier for code formatting? … No / Yes
|
|
|
+✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes
|
|
|
+
|
|
|
+Scaffolding project in ./<your-project-name>...
|
|
|
+Done.
|
|
|
+```
|
|
|
+如果不确定是否要开启某个功能,你可以直接按下回车键选择 `No`。
|
|
|
+在项目被创建后,通过以下步骤安装依赖并启动开发服务器:
|
|
|
+```shell
|
|
|
+cd <your-project-name>
|
|
|
+npm install
|
|
|
+npm run dev
|
|
|
+```
|
|
|
+
|
|
|
+当你准备将应用发布到生产环境时,请运行:
|
|
|
+```shell
|
|
|
+npm run build
|
|
|
+```
|
|
|
+此命令会在 `./dist` 文件夹中为你的应用创建一个生产环境的构建版本。
|
|
|
+
|
|
|
+# Vite
|
|
|
+
|
|
|
+[Vite](https://cn.vitejs.dev/) 是一个轻量级的、速度极快的构建工具
|
|
|
+```shell
|
|
|
+npm create vue@latest
|
|
|
+```
|
|
|
+
|
|
|
+这个命令会安装和执行 [create-vue](https://github.com/vuejs/create-vue),它是 Vue 提供的官方脚手架工具。跟随命令行的提示继续操作即可。
|
|
|
+
|
|
|
+# 关于 Vue CLI
|
|
|
+
|
|
|
+[Vue CLI](https://cli.vuejs.org/zh/) 是官方提供的基于 Webpack 的 Vue 工具链,它现在处于维护模式。我们建议使用 Vite 开始新的项目,除非你依赖特定的 Webpack 的特性。在大多数情况下,Vite 将提供更优秀的开发体验。
|
|
|
+
|
|
|
+```shell
|
|
|
+# 全局安装 vue cli
|
|
|
+npm install -g @vue/cli
|
|
|
+# 创建项目
|
|
|
+vue create vue-demo
|
|
|
+# 进入项目
|
|
|
+cd vue-demo
|
|
|
+# 运行项目
|
|
|
+npm run serve
|
|
|
+```
|
|
|
+
|
|
|
+# 入门
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+创建vue实列
|
|
|
+
|
|
|
+createApp(App).mount('#app')
|
|
|
+
|
|
|
+createApp(App) 相当于 vue2 的 new Vue()
|
|
|
+
|
|
|
+
|
|
|
+## 1、reactive shallowreactive
|
|
|
|
|
|
reactive 声明对象为响应式数据的函数,监听对象所有层次的属性
|
|
|
shallowreactive 相比与reative,只监听对象的根属性
|
|
@@ -22,18 +100,18 @@ function change() {
|
|
|
```
|
|
|
|
|
|
|
|
|
-2、ref
|
|
|
+## 2、ref
|
|
|
|
|
|
ref 基础数据为响应式数据
|
|
|
```js
|
|
|
const mydata = ref(0);
|
|
|
function change() {
|
|
|
- mydata.value ++;
|
|
|
+ mydata.value ++;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
|
|
|
-3、readonly shallowReadonly
|
|
|
+## 3、readonly shallowReadonly
|
|
|
|
|
|
readonly 声明只读数据的函数,对象中所有层次的属性都是只读
|
|
|
shallowReadonly 相对于shallowReadonly,对象中只有根属性是只读,其他属性允许修改
|
|
@@ -56,23 +134,23 @@ function change() {
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-4、computed
|
|
|
+## 4、computed
|
|
|
|
|
|
-响应式数据变化了,computed 函数只会第1次调用,其他情况使用缓存
|
|
|
+响应式数据变化了,computed 函数第一次调用时才执行函数内部逻辑,其他时候使用缓存
|
|
|
```js
|
|
|
const mydata = ref('这是一段标题');
|
|
|
const getLen = computed(() => {
|
|
|
- console.log("计算长度")
|
|
|
- return mydata.value.length;
|
|
|
+ console.log("计算长度")
|
|
|
+ return mydata.value.length;
|
|
|
});
|
|
|
|
|
|
function change() {
|
|
|
- mydata.value = mydata.value + "!";
|
|
|
+ mydata.value = mydata.value + "!";
|
|
|
}
|
|
|
```
|
|
|
|
|
|
|
|
|
-5、watch 侦听器
|
|
|
+## 5、watch 侦听器
|
|
|
|
|
|
监听响应式数据
|
|
|
|
|
@@ -94,6 +172,10 @@ const mydata = reactive({
|
|
|
function change() {
|
|
|
mydata.age ++;
|
|
|
}
|
|
|
+// 这种情况是不被允许的
|
|
|
+watch(mydata.age, (newValue, oldValue) => {
|
|
|
+ console.log(newValue, oldValue);
|
|
|
+});
|
|
|
// 监听响应式数据对象内部属性
|
|
|
watch(() => mydata.age, (newValue, oldValue) => {
|
|
|
console.log(newValue, oldValue);
|
|
@@ -101,7 +183,7 @@ watch(() => mydata.age, (newValue, oldValue) => {
|
|
|
```
|
|
|
|
|
|
|
|
|
-6、watchEffect
|
|
|
+## 6、watchEffect
|
|
|
侦听多个响应式数据
|
|
|
|
|
|
```js
|
|
@@ -123,3 +205,9 @@ watchEffect(() => {
|
|
|
});
|
|
|
```
|
|
|
|
|
|
+
|
|
|
+# 关于 vue devtools
|
|
|
+
|
|
|
+Vue Devtools 是 Vue 官方发布的调试[浏览器插件](https://so.csdn.net/so/search?q=%E6%B5%8F%E8%A7%88%E5%99%A8%E6%8F%92%E4%BB%B6&spm=1001.2101.3001.7020),可以安装在 Chrome 和 Firefox 等浏览器上,直接内嵌在开发者工具中,使用体验流畅。Vue Devtools 由 Vue.js 核心团队成员 Guillaume Chau 和 Evan You 开发。
|
|
|
+
|
|
|
+应用商店 [Installation | Vue Devtools (vuejs.org)](https://devtools.vuejs.org/guide/installation.html)
|