大家好，我是 ed.

今天我们稍微说一下vue3项目中的hooks的使用，其实这个hooks呢是和vue2当中的mixin是类似的，学习过vue2的小伙伴一定对mixin一定比较熟悉，就算没用过也一定了解过，也就是混入，通过mixin混入来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。而vue2的hooks函数与mixin混入的区别，主要是hooks是函数。......

之前学习过vue2的宝子们是知道的，当时我们开发vue2项目呢，使用的是js编码。当vue3发布之后，很多小伙伴尝鲜，很多人都已经知道了vue3的底层是用ts来写的，所以呢，vue3对于ts的支持和适配已经是相当不错了，所以说呢，现在开发vue3的时候呢，有必要了解一下ts版本的开发。无论是js还是ts开发，其实都是一样的哈，在开发项目的时候呢，ts版本可以从一开始就能避免很多类型上的问题，所以说呢，先看一下ts项目的创建吧。......

Pinia是Vue的存储库，它允许您跨组件/页面共享状态。Pinia的成功可以归功于他管理存储数据的独特功能，例如可扩展性、存储模块组织、状态变化分组、多存储创建等。

这是一个中国省市区连级数据下拉工具，可以获取行政区编码，也可以获取省市区的名称，具体的效果是下面的样子。这个工具使用起来也很简单。npm 网址： https://www.npmjs.com/package/element-china-area-data使用 npm 安装。在需要使用连级选择的页面引入插件。说明：好了，具体可以看 npm 网站的案例。...

今天说一下 vue3 的组件间传值，学习过 vue2 的宝子们肯定知道，组件传值是 vue 项目开发过程中必不可少的功能场景，在 vue2 里面有很多传值的方式，vue3 的传值方式呢，在这里稍微整理总结一下，但是不是很全，后期可能慢慢补充。和 vue2 一样，vue3 也可以使用 props 进行父组件传值给子组件，这个就不多说了直接上代码。父组件子组件保存查看效果。上面就是 props 传值的基本用法。这个其实和 vue2 的写法是一模一样的。直接上代码！！父组件子组件刷新看一下效果。好的，我

嗯，怎么说呢，其实这两个函数并不是很常用，在开发过程中基本上用不到，但是呢，我不写我又感觉少点啥，所以说就简单的说一下吧，其实不看也可以哈。上面说了是不是还是没看懂？没关系哈，先记住上面三条，然后详细的说一下。我们在之前的博客讲过 ref 函数和 reactive 函数，他们的作用是将数据转换成响应式的数据，在修改数据的时候，可以将数据实时展示在页面上，基本数据也好，对象也好，都是这样。但是有一个问题呀，我们在把数据改为响应式数据的时候，不管是用 ref 函数还是使用 reactive 函数，他俩都是深度监

上一节我们学习了 watch 侦听器的基础用法，用来监听页面数据的变化，那么今天呢，我们来学习一下 watch 侦听器的好兄弟 watchEffect 侦听器。这个相对来说比较简单，用的不是很多，当然了，根据自己的项目情况自行决定使用。这个就不详细说了，简单过一下子。其实我觉得这个玩意儿哈，不用也罢，啊哈哈哈哈哈！怎么说呢，你可以理解成 watch 和 watchEffect 这两个玩意儿的功能是一样的。：显示指定依赖源，依赖源更新时执行回调函数。：自动收集依赖源，依赖源更新时候重新执行自身。总结：能用

上一节我们简单的介绍了一下 vue3 项目中的计算属性，这一节我们继续 vue3 的基础知识讲解。这一节我们来说 vue3 的侦听器。学过 vue2 的小伙伴们肯定学习过侦听器，主要是用来监听页面数据或者是路由的变化，来执行相应的操作，在 vue3里面呢，也有侦听器的用法，功能基本一样，换汤不换药的东西。 侦听器是常用的 Vue API 之一，它用于监听一个数据并在数据变动时做一些自定义逻辑，本文将先列举侦听器在 Vue 中的使用方式，然后再分析源码讲述为什么可以这样使用、以及侦听器的实现原理。下面我们稍微

上一篇博文说了 vue3 项目的 toRefs 函数和 toRef 函数，今天就稍微总结一下 vue3 的计算属性，其实学过 vue2 的宝子们应该都清楚，计算属性这个东西在项目开发过程中使用的还是比较频繁的，使用频率相对来说比较高，所以说咱今天稍微总结一下 vue3 项目中的计算属性，下面开始。computed 表示计算属性，通常的作用是用来进行数据处理，方便在末班中简化书写。比如日常在模板中我们渲染数据的时候一般是使用 来进行展示数据，但是有的时候嘞，获取到的数据并不是我们想要的类型，我们可以在

上一篇博文介绍了 vue3 里面的 ref 函数和 reactive 函数，实现响应式数据，今天主要来说一下 toRef 函数和 toRefs 函数的基本使用。通过上一篇博客，我们知道，ref 函数可以创建一个响应式的数据，那 toRef 函数同样也是创建一个响应式的数据，那么他们之间的区别是什么呢？首先一点，ref 函数他的本质其实是去拷贝一份数据，脱离了与源数据的交互。什么意思呢？就是 ref 函数可以将对象里面的属性值变成响应式的数据，修改响应式数据，是不会影响到源数据，但是视图层上的数据会被更新。但

上一篇博文介绍 setup 函数的时候，最后出现一个问题，就是在 setup 函数中，编写一个事件，直接去修改定义的变量，发现页面上没有更新成功，并且控制台报错，那这篇博客就是讲解遇到的这个问题应该如何处理。使用 ref 函数很简单，首先要在页面引用，然后就可以直接使用了，具体怎么使用呢，下面为了方便介绍，简单来几个案例。首先提一个需求：页面有一个名称需要显示，有一个按钮，点击按钮的时候修改页面展示的这个名字。编写完上面的代码保存刷新，可以正常渲染数据，但是点击按钮修改名字的时候，出现问题！为什么使用过

首先，目前来说 vue3 发布已经有一段时间了，但是呢，由于还处于优化完善阶段，对于 vue3 开发项目的需求不是很高，主要还是以 vue2 开发为主，但是相信，vue3 进行项目开发是大势所趋。vue2 开发项目过程中，会存在代码冗余和结构杂乱问题，这是 vue3 主要解决的问题，vue3 可以将相关功能的代码抽离分割在一起，方便开发者快速阅读，提高项目代码的可读性和可维护性。在 vue3 版本中，引入了一个新的函数，叫做 setup，引入他的原因总结一下主要原因是：为了使用组合式 API，setup 函

首先一点呢， Vue2 和 Vue3 中的生命周期钩子的工作方式基本上是一致的，而且如果项目中使用的选项API，基本上不需要更改什么代码， 因为 Vue3 是向下兼容的，如果是使用 Vue3 的组合式 API，那么使用的方式是有些许的不同，毕竟组合式 API 在大的 Vue 项目中还是比较吃香的。在 Vue2 里面，生命周期钩子主要有 8 个，分别是：除了上面的 8 个之外，还有两个分别是 activated 和 deactivated。分别用来组件激活时回调和组件停用时回调。但是 activated 函数

创建 Vue3 项目有两种常见的方式，一种是想 vue2 版本一样使用脚手架工具创建，创建 vue3 项目的脚手架必须是4版本以上的，另一种方法就是使用 vite 创建，为什么使用 vite 呢？因为快！贼快！vite 官网：https://cn.vitejs.dev/安装 vite 构建工具：Vite 创建 vue3 项目创建一个项目名称为 的项目：项目创建完成的目录结构就是这个样子的。然后进入文件夹，安装依赖，启动就可以了。然后使用 Vite 创建的项目真的厉害，秒开，不用打包直接启动。安

vue3 介绍

最后的效果就是这个样子的啦！就是很简单的一个卫星，放射信号，然后围着轨道转圈圈。首先呢，分享几个网站，尽管大家应该都有，但是还是分享一下子吧。cesium API 中文网站3D模型下载其中这个下载3D模型的网站有很多3D模型，可以根据自己的需要搜索下载使用，尽管大部分是收费的，但是又免费的呀，自己测试或者是玩的话，我觉得够用了，我觉得还不错的呢！首先这个稍微说一下哈，其实就是用了 cesium 的时间轴，然后添加卫星模型，在距离地面的固定高度按照设置好的轨迹进行绕地旋转，关于下面的锥形信号覆盖区域，就是在

官网写的很好了，但是有一些没有注释，所以说刚入门的小可爱们不知道那些代码分别是绘制啥的，所以说嘞，我稍微整理了一下。未完待续 ~~~~

然后这篇博文介绍的主要不是添加模型，但是也简单把代码直接粘贴过来吧，就不详细说了。

首先嘞，绘制热力图需要有一个工具，就是使用 CesiumHeatmap 这个工具，然后呢，下面是他的一个github的地址。CesiumHeatmap 【时空门~ 嗖~】下载下来放到项目里面就可以了。我把他放到了这里面嘞。...

上面的就是 geoserve 发不出来的 WMS 图层连接。具体我不知道为啥这样写哈，但是我这样设置是可以加载出来的啊！然后就可以了。