关于 vue3.0 实战项目中遇到的问题
介绍vue3.0的特性：
亿点小知识1.diff算法的优化 增加了静态标记PatchFlag
2.按需编译，体积比Vue2.x更小（Tree shaking）
3.Compostion API: 组合API/注入API
4.自定义渲染API（Custom Renderer API）
5.数据监听方式变成了Proxy，消除了Object.defineProperty现有的限制
1.setup 实战的两种写法：
第一种写法： // 这种写法是 setup函数的写法 需要定义在setup内 然后在return 出去 // 这里也一并写了 vus3.0 props 接收参数的写法 export default { props: { title: String }, setup(props) { console.log(props.title) } return { title } } 第二种写法： <script lang="ts" setup> // setup 语法糖 通过引入 vue，vue-router 等结构的方法来用 （推荐） import { onMounted, ref, reactive } from 'vue'; onMounted(() => { // 生命周期 直接可以使用 }) // 接受 props参数 const props = withDefaults(defineProps(), { label: '' }) let name = ref('张三') let obj = reactive({ name:"小红"， age:18 }) </script>
2.ref 和 reactive
通俗理解 ref 和 reactive 都是用来定义响应式数据的 reactive更推荐去定义复杂的数据类型 ref 更推荐定义基本类型
<script lang="ts" setup> // setup 语法糖 通过引入 vue，vue-router 等结构的方法来用 （推荐） import { ref, reactive } from 'vue'; 这里的 ref 和 reactive 是用来创建数据双向绑定的 可以创建多个 我们在使用的时候 根据数据来选择是否使用 ref 或者 reactive let name = ref('张三') let obj = reactive({ name:"小红"， age:18 }) // 更改数据 name.value = "李四" // 这里要注意的是 ref 使用 需要通过 .value更改数据 obj.name = "小绿" // reactive 就直接修改数据 </script>
3.一些常用的AIP
import { useStore } from "vuex"; // 先引入 然后在解构 const store = useStore();// 实例化 import { useRouter, useRoute } from 'vue-router'; // router 也是一样的使用方法 const router = useRouter() const route = useRoute() router.push({path:""/""}) // 路由跳转
在main.js中的改动
const app = createApp(App); app.use(router).use(store).mount('#app') // 这里变成了 链式的写法
如果对你有用的话。可以关注收藏博客 作者会持续更新…
