文章目录
- 知识回顾
- 前言
- 源码分析
-
- [1. 项目结构介绍(单页面应用程序)](#1. 项目结构介绍(单页面应用程序))
- [2. 项目运行流程图(单页面应用程序)](#2. 项目运行流程图(单页面应用程序))
- [3. 选项式和组合式api](#3. 选项式和组合式api)
- [4. 插值表达式 {{}} 胡子语法](#4. 插值表达式 {{}} 胡子语法)
- [5. reactive函数](#5. reactive函数)
- [6. ref表达式](#6. ref表达式)
- 拓展知识
- 总结
知识回顾
前言
Vue项目介绍
源码分析
1. 项目结构介绍(单页面应用程序)
c
VUE-DEMO
│─node_modules 第三包文件夹
├─public 放html文件的地方
| └─favicon.ico 网站图标
├─src 源代码目录 → 以后写代码的文件夹
│ └─assets 静态资源目录 → 存放图片、字体等
│ └─components 组件目录 → 存放通用组件
│ └─App.vue App根组件 → 项目运行看到的内容就在这里编写
│ └─main.ts 入口文件 → 打包或运行,第一个执行的文件
└─.eslintrc.cjs eslint配置文件
└─.gitignore git忽视文件
└─.prettierrc.json prettierrc配置文件
└─env.d.ts ts代码智能提示使用
└─index.html index.html 模板文件
└─package.json 项目配置文件 → 包含项目名、版本号、scripts、依赖包等
└─pnpm-lock.yaml pnpm锁文件,由pnpm自动生成的,锁定安装版本
└─README.md 项目说明文档
└─tsconfig.app.json ts项目配置文件
└─tsconfig.json ts配置文件
└─tsconfig.app.json ts的node环境配置文件
└─vite.config.js create-vue配置文件
2. 项目运行流程图(单页面应用程序)
项目运行后执行main.ts
main.ts中会执行app.vue文件,导入createapp方法,导入app.vue , 创建app实例对象
最后渲染到index.html容器中
3. 选项式和组合式api
- 选项式
c
<template>
<button @click="toggle">显示隐藏图片</button>
<img v-show="show" alt="Vue logo" src="./assets/logo.png" />
<hr />
计数器:{{ count }} <button @click="increment">累加</button>
</template>
<script>
export default {
data() {
return {
show: true,
count: 0
}
},
methods: {
toggle() {
this.show = !this.show
},
increment() {
this.count++
}
}
}
</script>
- 组合式
c
<template>
<button @click="toggle">显示隐藏图片</button>
<img v-show="show" alt="Vue logo" src="./assets/logo.svg" />
<hr />
计数器:{{ count }} <button @click="increment">累加</button>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const show = ref(true)
const toggle = () => {
show.value = !show.value
}
const count = ref(0)
const increment = () => {
count.value++
}
</script>
4. 插值表达式 {{}} 胡子语法
插值表达式是一种Vue的模板语法, 我们可以用插值表达式渲染出Vue提供的数据
- 作用:利用表达式进行插值,渲染到页面中
- 表达式:是可以被求值的代码,JS引擎会讲其计算出一个结果
注意事项:
- 在插值表达式中使用的数据 必须在setup函数中进行了提供
- 支持的是表达式,而非语句,比如:if for ...
- 不能在标签属性中使用 {{ }} 插值 (插值表达式只能标签中间使用)
c
<template>
<div>{{ title }}</div>
<div>{{ sum(100, 200) }}</div>
<p>{{ array[1] }}</p>
</template>
<script setup lang="ts">
const title = 'test'
const sum = (num1: number, num2: number) => {
return num1 + num2
}
const array = [1, 2, 3]
</script>
5. reactive函数
c
<template>
<button @click="onClick">点击我</button>
<button @click="addAge">增加年龄</button>
<button @click="addHobbies">新增爱好</button>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
const person = reactive({
name: '张三',
age: 18,
friend: {
name: '李四',
age: 20,
hobbies: ['打游戏', '看电影']
}
})
const onClick = () => {
console.log('点击了')
alert('点击了我')
}
const addAge = () => {
person.age++
console.log(person.age)
}
const addHobbies = () => {
person.friend.hobbies.push('看书')
console.log(person.friend.hobbies)
}
</script>
6. ref表达式
c
<template>
<div>年龄{{ age }}</div>
<button @click="changeAge">修改年龄</button>
<div>{{ person }}</div>
<button @click="changePersonAge">修改person中年龄</button>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
const age = ref(18)
const changeAge = () => {
age.value++
}
const person = ref({ name: '张三', age: 18 })
const changePersonAge = () => {
person.value.age++
}
</script>
拓展知识
reactive和ref的选择
- 开始分析
● reactive 可以转换对象成为响应式数据对象,但是不支持简单数据类型。
● ref 可以转换简单数据类型为响应式数据对象,也支持复杂数据类型,但是操作的时候需要 .value 。
● 它们各有特点,现在也没有最佳实践,没有明显的界限,所有大家可以自由选择。 - 推荐用法
● 如果能确定数据是对象且字段名称也确定,可使用 reactive 转成响应式数据,其他一概使用 ref 。这样就没有心智负担 。