<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~]]></title><description><![CDATA[敲代码让我快乐  (*^▽^*)    ヾ(◍°∇°◍)ﾉﾞ]]></description><link>https://blog.youkuaiyun.com/Janicecat</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Janicecat]]></copyright><item><title><![CDATA[树结构数据，将子数据push到对应数组中]]></title><link>https://blog.youkuaiyun.com/Janicecat/article/details/126729482</link><guid>https://blog.youkuaiyun.com/Janicecat/article/details/126729482</guid><author>Janicecat</author><pubDate>Tue, 06 Sep 2022 17:34:19 +0800</pubDate><description><![CDATA[树结构数据，将子数据push到对应数组中]]></description><category></category></item><item><title><![CDATA[Vue3 - setup语法糖]]></title><link>https://blog.youkuaiyun.com/Janicecat/article/details/123923652</link><guid>https://blog.youkuaiyun.com/Janicecat/article/details/123923652</guid><author>Janicecat</author><pubDate>Sat, 02 Apr 2022 16:48:26 +0800</pubDate><description><![CDATA[与setup函数不同的是，在script标签中添加setup

1、变量、方法不需要 return 出来

属性和方法也不用返回，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得


&lt;script setup&gt;
    import { ref } from 'vue';

    &lt;!-- flag变量不需要在 return出去了 --&gt;
    let flag = ref("ABCD")...]]></description><category></category></item><item><title><![CDATA[Vue3 - 监听（watch函数、watchEffect函数）]]></title><link>https://blog.youkuaiyun.com/Janicecat/article/details/123922418</link><guid>https://blog.youkuaiyun.com/Janicecat/article/details/123922418</guid><author>Janicecat</author><pubDate>Sat, 02 Apr 2022 16:12:33 +0800</pubDate><description><![CDATA[1、watch函数（既要指明监视的属性，也要指明监视的回调）

坑：


1）监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）

2）监视reactive定义的响应式数据中某个属性时：deep配置有效



setup(){
    let sum = ref(0)
	 let msg = ref('ABCD')
    let person = reactive({
	   name:'张三',
	   age:18,
	   j...]]></description><category></category></item><item><title><![CDATA[Vue3 - setup函数]]></title><link>https://blog.youkuaiyun.com/Janicecat/article/details/123922091</link><guid>https://blog.youkuaiyun.com/Janicecat/article/details/123922091</guid><author>Janicecat</author><pubDate>Sat, 02 Apr 2022 15:54:51 +0800</pubDate><description><![CDATA[Vue3.0中一个新的配置项，值为一个函数

组件中所用到的：数据、方法等等，均要配置在setup中

setup执行的时机：在beforeCreate之前执行一次，this是undefined



setup有两个参数：props、context

    1、props 值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性

     props是响应式的，不能使用 ES6 解构，它会消除 prop 的响应性，如果需要解构 prop，可以在 setup函数中使用 toR...]]></description><category></category></item><item><title><![CDATA[Vue3 - 响应式原理（Proxy、Reflect）]]></title><link>https://blog.youkuaiyun.com/Janicecat/article/details/123921377</link><guid>https://blog.youkuaiyun.com/Janicecat/article/details/123921377</guid><author>Janicecat</author><pubDate>Sat, 02 Apr 2022 15:43:07 +0800</pubDate><description><![CDATA[实现原理：


	通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等，语法： new Proxy(target, handler) 。
	
	
	通过Reflect（反射）: 对源对象的属性进行操作。
	

new Proxy(data, {
	// 拦截读取属性值
    get (target, prop) {
    	return Reflect.get(target, prop)
    },
    // 拦截设置属性值或添加新属性
    set]]></description><category></category></item><item><title><![CDATA[Lodash - 集合方法 _.sortBy 返回排序后的数组]]></title><link>https://blog.youkuaiyun.com/Janicecat/article/details/122549602</link><guid>https://blog.youkuaiyun.com/Janicecat/article/details/122549602</guid><author>Janicecat</author><pubDate>Mon, 17 Jan 2022 22:19:27 +0800</pubDate><description><![CDATA[返回排序后的数组。

创建一个元素数组。 以 iteratee 处理的结果升序排序。 这个方法执行稳定排序，也就是说相同元素会保持原始排序。 iteratees 调用1个参数： (value)。

参数：

参数1：Arrar | Object

参数2：...(Array|Array[]|Function|Function[]|Object|Object[]|string|string[])

示例数组排序：


let users = [
        { user: "aaa", age: 18 }]]></description><category></category></item><item><title><![CDATA[Lodash - 对象方法 _.pick 从对象选择你想要的值]]></title><link>https://blog.youkuaiyun.com/Janicecat/article/details/122549310</link><guid>https://blog.youkuaiyun.com/Janicecat/article/details/122549310</guid><author>Janicecat</author><pubDate>Mon, 17 Jan 2022 21:54:59 +0800</pubDate><description><![CDATA[创建一个从 object 中选中的属性的对象（从对象选择你想要的值）

参数：

参数1：Object

参数2：String/Array（属性值数组）

示例：


let obj = { a: 1, b: "2", c: 3, d: 4, e: 5 }
console.log(_.pick(obj, "c"));
console.log(_.pick(obj, ["a", "b"]))

    输出结果：

       


...]]></description><category></category></item><item><title><![CDATA[Lodash - 数组方法 _.uniqBy 返回新的去重后的数组]]></title><link>https://blog.youkuaiyun.com/Janicecat/article/details/122549161</link><guid>https://blog.youkuaiyun.com/Janicecat/article/details/122549161</guid><author>Janicecat</author><pubDate>Mon, 17 Jan 2022 21:45:43 +0800</pubDate><description><![CDATA[返回新的去重后的数组

它接受一个 iteratee （迭代函数），调用每一个数组（array）的每个元素以产生唯一性计算的标准。iteratee 调用时会传入一个参数：(value)。

参数：

参数1：Array

参数2：迭代函数，调用每一个元素

示例：


let arr1 = [2.1, 1.2, 2.3, 2.5, 3.1, 3.2];
let arr2 = [{ x: 1 }, { x: 2 }, { x: 1 }];
console.log(_.uniqBy(arr1, Math.flo]]></description><category></category></item><item><title><![CDATA[Lodash - 对象方法 _.assign 浅拷贝]]></title><link>https://blog.youkuaiyun.com/Janicecat/article/details/122530280</link><guid>https://blog.youkuaiyun.com/Janicecat/article/details/122530280</guid><author>Janicecat</author><pubDate>Sun, 16 Jan 2022 22:34:30 +0800</pubDate><description><![CDATA[分配来源对象的可枚举属性到目标对象上。 来源对象的应用规则是从左到右，随后的下一个对象的属性会覆盖上一个对象的属性。

示例：


let obj1 = {
        a: 1,
        b: 2,
        desc: { age: 18, name: "某人" },
        arr: [1, 2],
};
let obj2 = { c: 3 };
let obj3 = _.assign({ a: 0 }, obj1, obj2);  //a:0会被覆盖为a:1

obj3.b]]></description><category></category></item><item><title><![CDATA[Lodash - 集合方法 _.groupBy 分组]]></title><link>https://blog.youkuaiyun.com/Janicecat/article/details/122529255</link><guid>https://blog.youkuaiyun.com/Janicecat/article/details/122529255</guid><author>Janicecat</author><pubDate>Sun, 16 Jan 2022 21:31:56 +0800</pubDate><description><![CDATA[对数据进行分组，返回一个对象

参数：

参数1：collection（Array|Object）

参数2：iteratee

示例1：


let arr1 = [6.1, 4.2, 6.3];
console.log(_.groupBy(arr1, Math.floor)); 
// 向下取整后分组=&gt; { '4': [4.2], '6': [6.1, 6.3] }



示例2：


let arr2 = ["one", "two", "thre...]]></description><category></category></item><item><title><![CDATA[Lodash - 集合方法 _.each/_.forEach 遍历数组/对象]]></title><link>https://blog.youkuaiyun.com/Janicecat/article/details/122528779</link><guid>https://blog.youkuaiyun.com/Janicecat/article/details/122528779</guid><author>Janicecat</author><pubDate>Sun, 16 Jan 2022 21:09:08 +0800</pubDate><description><![CDATA[_.forEach()：别名 _.each，可用于遍历集合（Array|Object）

1、参数：

参数1：collection

参数2：function，可传入三个参数（value,index|key,collection）

2、写法：


写法一：

_(collection).forEach((value, key, collection) =&gt; {

   ...

});

写法二：

...]]></description><category></category></item><item><title><![CDATA[Lodash - 数组方法 _.chunk、_.compact、_.concat、_.difference、_.differenceBy、_.drop]]></title><link>https://blog.youkuaiyun.com/Janicecat/article/details/122523994</link><guid>https://blog.youkuaiyun.com/Janicecat/article/details/122523994</guid><author>Janicecat</author><pubDate>Sun, 16 Jan 2022 15:53:59 +0800</pubDate><description><![CDATA[1、安装 Lodash


npm i --save lodash

2、引入


const _ = require("lodash");

3、使用


//_.方法名()
_.chunk(["a", "b", "c", "d"], 2)
_.compact([0, "1", 1, 2, 3, null])

4、示例

4.1 _.chunk

将数组拆分成多个长度的区块，并将这些区块组成一个新数组。 如果array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。

参数（array，]]></description><category></category></item><item><title><![CDATA[Vue组件封装 ——input 输入框组件]]></title><link>https://blog.youkuaiyun.com/Janicecat/article/details/122252772</link><guid>https://blog.youkuaiyun.com/Janicecat/article/details/122252772</guid><author>Janicecat</author><pubDate>Fri, 31 Dec 2021 11:36:50 +0800</pubDate><description><![CDATA[一、基础准备工作

1、创建一个基础的vue项目包

2、创建components文件夹，用于存放组件，新建input.vue组件，可以自己取个名字


&lt;script&gt;
export default {
    name: "CatInput",
};
&lt;/script&gt;

3、在main.js中引入组件


import CatInput from "./components/input.vue";
Vue.component(CatInput.name, CatInput)..]]></description><category></category></item><item><title><![CDATA[Vue组件封装 ——dialog对话框组件]]></title><link>https://blog.youkuaiyun.com/Janicecat/article/details/122234639</link><guid>https://blog.youkuaiyun.com/Janicecat/article/details/122234639</guid><author>Janicecat</author><pubDate>Thu, 30 Dec 2021 13:40:16 +0800</pubDate><description><![CDATA[一、基础准备工作

1、创建一个基础的vue项目包

2、创建components文件夹，用于存放组件，新建dialog.vue组件，可以自己取个名字


&lt;script&gt;
export default {
  name: "CatDialog",
};
&lt;/script&gt;

3、在main.js中引入组件


import CatDialog from "./components/dialog.vue";
Vue.component(CatDialog.name, CatDial.]]></description><category></category></item><item><title><![CDATA[Vue组件封装 ——button组件]]></title><link>https://blog.youkuaiyun.com/Janicecat/article/details/122216428</link><guid>https://blog.youkuaiyun.com/Janicecat/article/details/122216428</guid><author>Janicecat</author><pubDate>Wed, 29 Dec 2021 15:23:23 +0800</pubDate><description><![CDATA[一、基础准备工作

1、创建一个基础的vue项目包

2、创建components文件夹，用于存放组件，新建button.vue组件，可以自己取个名字


&lt;script&gt;
export default {
  name: "CatButton",
};
&lt;/script&gt;

3、在main.js中引入组件


import CatButton from "./components/button.vue";
Vue.component(CatButton.name, CatButto]]></description><category></category></item><item><title><![CDATA[自定义Vue指令，设置每个页面的title]]></title><link>https://blog.youkuaiyun.com/Janicecat/article/details/122150037</link><guid>https://blog.youkuaiyun.com/Janicecat/article/details/122150037</guid><author>Janicecat</author><pubDate>Sat, 25 Dec 2021 22:54:08 +0800</pubDate><description><![CDATA[定义指令 v-title：


directive{
    title:{
        inserted: (el) {
        document.title = el.dataset.title
      }
    }
}


调用：


&lt;div v-title data-title="首页"&gt;&lt;/div&gt;



]]></description><category></category></item><item><title><![CDATA[CSS中水平垂直居中的几种常用方法]]></title><link>https://blog.youkuaiyun.com/Janicecat/article/details/122149493</link><guid>https://blog.youkuaiyun.com/Janicecat/article/details/122149493</guid><author>Janicecat</author><pubDate>Sat, 25 Dec 2021 22:41:28 +0800</pubDate><description><![CDATA[效果：




    &lt;div class="outer"&gt;
        &lt;div class="inner"&gt;oooo.oooo&lt;/div&gt;
    &lt;/div&gt;



1、flex弹性布局

外层容器设置flex弹性布局，设置主轴和交叉轴center


    &lt;style&gt;
        .outer{
            width: 200px;
            height: 200px;
   ...]]></description><category></category></item><item><title><![CDATA[JS对象 - 拷贝对象的常用方法（浅拷贝与深拷贝）]]></title><link>https://blog.youkuaiyun.com/Janicecat/article/details/122052207</link><guid>https://blog.youkuaiyun.com/Janicecat/article/details/122052207</guid><author>Janicecat</author><pubDate>Mon, 20 Dec 2021 22:59:03 +0800</pubDate><description><![CDATA[1、JSON.parse(JSON.stringify(obj))

    先将目标对象转为字符串，再转为对象，可实现对象的深拷贝


var obj1 = {name:'明明',scores:[88,76,91]}
var obj2 = JSON.parse(JSON.stringify(obj1))
console.log(obj1 === obj2)  //false

    适用于绝大部分的对象，支持的数据类型有：String /Number / Boolean / Objec...]]></description><category></category></item><item><title><![CDATA[ReactNative 基础 - 14 （路由、跳转、传参）]]></title><link>https://blog.youkuaiyun.com/Janicecat/article/details/122047865</link><guid>https://blog.youkuaiyun.com/Janicecat/article/details/122047865</guid><author>Janicecat</author><pubDate>Mon, 20 Dec 2021 19:03:28 +0800</pubDate><description><![CDATA[react提供了router路由react-router-dom，ReactNative为了能够在移动端有更多的路由使用体验，专门开发了路由系统.

官方网址：https://reactnavigation.org/

使用RN的路由，需要在项目包安装并且编译成apk才能使用

1、安装：npm install @react-navigation/native

2、使用：

NavigationContainer：路由容器

Stack.Navigator：栈式导航 一个匹...]]></description><category></category></item><item><title><![CDATA[ReactNative 基础 - 13 （FlatList横向滚动，实现轮播）]]></title><link>https://blog.youkuaiyun.com/Janicecat/article/details/122047832</link><guid>https://blog.youkuaiyun.com/Janicecat/article/details/122047832</guid><author>Janicecat</author><pubDate>Mon, 20 Dec 2021 18:59:56 +0800</pubDate><description><![CDATA[horizontal：横向排列

pagingEnabled：按页滚动


export default class App extends Component {
  banners = [
    'http://www...1.png',
    'http://www...2.png',
    'http://www...3.png',
    'http://www...4.png',
  ];
  current = 0;
  componentDidMount() {
    //利用定时器]]></description><category></category></item></channel></rss>