Vue 常用

分手后的思念是犯贱 2023-10-06 20:22 17阅读 0赞

#### 阅读目录 ####

*  Vue3中八个生命周期函数
 *  js动态添加对象属性
 *  js 遍历对象
 *   *  第一种： for......in
     *  第二种
     *  第三种：使用Object.getOwnPropertyNames(obj)
 *  js 数组、对象转json 以及json转 数组、对象
 *  js创建对象的方式
 *   *  一、通过”字面量“方式创建
     *  二、使用工厂模式创建对象
     *  三、通过”构造函数“方式创建
     *  四、通过object方式创建
     *  五、原型创建对象模式
     *  六、组合使用构造函数模式和原型模式
 *  js:数组，对象的拼接方法

## Vue3中八个生命周期函数 ##

beforeCreate() ：在实例生成之前会自动执行的函数

created() : 在实例生成之后会自动执行的函数

beforeMount() ：在模板渲染完成之前执行的函数

mounted() ：在模板渲染完成之后执行的函数

beforeUpdate ：当data中的数据变化时， 会立即自动执行的函数

updated：当data中的数据发生变化，页面重新渲染完后，会自动执行的函数

beforeUnmount()：当Vue应用失效时，会自动执行的函数

unmounted()：当Vue应用失效时，且DOM完全销毁之后，会自动执行

## js动态添加对象属性 ##

// 第一种方法
    var obj = {
         "name": "张三", "age": 18 }
    var key = "height";
    var value = 175;
    obj[key] = value;
    console.log(obj); // {name: "张三", age: 18, height: 175}
    
    // 第二种方法
    var obj1 = {
         "name": "张三", "age": 18 }
    var value = 175;
    obj1.height = value;
    console.log(obj1); // {name: "张三", age: 18, height: 175}
    
    // 第三种方法，扩展运算符
    var obj1 = {
         "apple": 100, "pear": 200 };
    var obj2 = {
         "cherry": 300 };
    var obj3 = {
         ...obj1, ...obj2 };
    console.log(obj3); // {apple: 100, pear: 200, cherry: 300}
    
    // 第四种办法,合并多个对象 Object.assign
    var obj1 = {
         a: "1" };
    var obj2 = {
         b: "2" };
    var obj3 = {
         c: "3" };
    var obj = Object.assign(obj1, obj2, obj3);
    console.log(obj); // {a: "1", b: "2", c: "3"}
    console.log(obj1); // {a: "1", b: "2", c: "3"}  //注意目标对象自身也会改变
    console.log(obj2); //{b: "2"}
    console.log(obj3); //{c: "3"}

## js 遍历对象 ##

### 第一种： for…in ###

const obj = {
        
                id:1,
                name:'zhangsan',
                age:18}
    
    for(let key  in obj){
        
        console.log(key + '---' + obj[key])
    }

![在这里插入图片描述][1cec0c5ebfe3459ea862c0772b50dc33.png]

### 第二种 ###

1）、Object.keys（obj）

2）、Object.values（obj）

参数：  
obj：要返回其枚举自身属性的对象

返回值：  
一个表示给定对象的所有可枚举属性的字符串数组。

const obj = {
        　　　　
    	id:1,　　　　
    	name:'zhangsan',　　　　
    	age:18}
    
    console.log(Object.keys(obj))
    console.log(Object.values(obj))

输出结果： obj对象的key组成的数组  
`['id','name','age']`

输出结果：obj对象的value组成的数组  
`['1','zhangsan','18']`

### 第三种：使用Object.getOwnPropertyNames(obj) ###

返回一个数组，包含对象自身的所有属性（包含不可枚举属性）  
遍历可以获取`key`和`value`

const obj = {
        
             id:1,
             name:'zhangsan',
             age:18
          }
        
    Object.getOwnPropertyNames(obj).forEach(function(key){
        
        console.log(key+ '---'+obj[key])
    })

![在这里插入图片描述][161c9f62bbb044c081ae556298ea5261.png]

## js 数组、对象转json 以及json转 数组、对象 ##

1、JS对象，转JSON

var json = {
        "name":"iphone","price":666}; //创建对象；
    var jsonStr = JSON.stringify(json);       //转为JSON字符串
    console.log(jsonStr); // {"name":"iphone","price":666}

2、JS数组，转JSON

var arr = [1,2,3, {
         a : 1 } ];
    console.log(JSON.stringify(arr)); // [1,2,3,{"a":1}]

3、JSON转，JS数组

var jsonStr = '[1,2,3,{"a":1}]';
    var jsarr=JSON.parse( jsonStr );
    console.log(jsarr);

![在这里插入图片描述][2cd625f0a7824802819180b8a1a5e87f.png]  
4、JSON转JS对象

var jsonString = '{"bar":"property","baz":3}';
    var jsObject = JSON.parse(jsonString);    //转换为json对象
    console.log(jsObject); // {bar: 'property', baz: 3}

## js创建对象的方式 ##

javascript是一种“基于prototype的面向对象语言“，与java有非常大的区别，无法通过类来创建对象。

那么，既然是面象对象的，如何来创建对象呢？

### 一、通过”字面量“方式创建 ###

方法：将成员信息写到 `{}` 中，并赋值给一个变量，此时这个变量就是一个对象。

如果 `{}` 中为空，则将创建一个空对象：

var person = {
        } //创建空对象

演示代码：

![在这里插入图片描述][560e345a94604972afd169e526888e8e.png]

我们还可以给对象丰富成员信息。  
`对象.成员名称 = 值;`  
`对象[成员名称] = 值;`

也可以获取对象的成员信息。  
`对象.成员名称;`  
`对象[成员名称];`

### 二、使用工厂模式创建对象 ###

![在这里插入图片描述][10cea4c4e0194b83b1d74b4613499342.png]  
在使用工厂模式创建对象的时候，我们都可以注意到，在`createPerson`函数中，返回的是一个对象。那么我们就无法判断返回的对象究竟是一个什么样的类型。于是就出现了第三种创建对象的模式。

### 三、通过”构造函数“方式创建 ###

var obj = new 函数名();

这与通过类创建对象有本质的区别。

通过该方法创建对象时，会自动执行该函数。这点类似于php通过创建对像时，会自动调用构造函数，因此该方法称为通过"构造函数“方式创建对象。

![在这里插入图片描述][f20a05cea71346258ce1849a29abb31f.png]  
![在这里插入图片描述][692780f0f3b94c78838a782c0d33d845.png]  
此代码一共会两次跳出对话框，原因在于创建对象是自动执行了该函数。

注意：  
this关键字的使用。  
这里的this与php中话法意思类似，指调用该函数的对象，这里指的是person。

**对比工厂模式，我们可以发现以下区别：**

1.没有显示地创建对象  
2.直接将属性和方法赋给了this对象  
3.没有return语句  
4.终于可以识别的对象的类型。对于检测对象类型，我们应该使用instanceof操作符，我们来进行自主检测：

alert(person1 instanceof Object);//ture
    alert(person1 instanceof Person);//ture
    alert(person2 instanceof Object);//ture
    alert(person2 instanceof Object);//ture

同时我们也应该明白，按照惯例，构造函数始终要应该以一个大写字母开头，而非构造函数则应该以一个小写字母开头。

那么构造函数确实挺好用的，但是它也有它的缺点：

就是每个方法都要在每个实例上重新创建一遍，方法指的就是我们在对象里面定义的函数。如果方法的数量很多，就会占用很多不必要的内存。

### 四、通过object方式创建 ###

方法：先通过object构造器new一个对象，再往里丰富成员信息。

var obj = new Object();

实例代码：

![在这里插入图片描述][a6466bc0b21b4ca9ab6a68ad67b02859.png]

### 五、原型创建对象模式 ###

![在这里插入图片描述][c1386cf34a1344f89e1905067f69e27c.png]  
使用原型创建对象的方式，可以让所有对象实例共享它所包含的属性和方法。

如果是使用原型创建对象模式，请看下面代码：

![在这里插入图片描述][d4557b84f7c940c69daab840808c4195.png]  
![在这里插入图片描述][55314835f5354fdbb5a576f0b867c97b.png]  
当为对象实例添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性。

这时候我们就可以使用构造函数模式与原型模式结合的方式，构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。

### 六、组合使用构造函数模式和原型模式 ###

![在这里插入图片描述][cf616d0741914f2e8993ba54857a3937.png]

## js:数组，对象的拼接方法 ##

说明：把两个对象的数据放在一个对象里面

方法1

`tmp {q: 'qq', w: 'ww', e: 'ee', r: 'rr'}`

方法2

[1cec0c5ebfe3459ea862c0772b50dc33.png]: https://img-blog.csdnimg.cn/1cec0c5ebfe3459ea862c0772b50dc33.png
[161c9f62bbb044c081ae556298ea5261.png]: https://img-blog.csdnimg.cn/161c9f62bbb044c081ae556298ea5261.png
[2cd625f0a7824802819180b8a1a5e87f.png]: https://img-blog.csdnimg.cn/2cd625f0a7824802819180b8a1a5e87f.png
[560e345a94604972afd169e526888e8e.png]: https://img-blog.csdnimg.cn/560e345a94604972afd169e526888e8e.png
[10cea4c4e0194b83b1d74b4613499342.png]: https://img-blog.csdnimg.cn/10cea4c4e0194b83b1d74b4613499342.png
[f20a05cea71346258ce1849a29abb31f.png]: https://img-blog.csdnimg.cn/f20a05cea71346258ce1849a29abb31f.png
[692780f0f3b94c78838a782c0d33d845.png]: https://img-blog.csdnimg.cn/692780f0f3b94c78838a782c0d33d845.png
[a6466bc0b21b4ca9ab6a68ad67b02859.png]: https://img-blog.csdnimg.cn/a6466bc0b21b4ca9ab6a68ad67b02859.png
[c1386cf34a1344f89e1905067f69e27c.png]: https://img-blog.csdnimg.cn/c1386cf34a1344f89e1905067f69e27c.png
[d4557b84f7c940c69daab840808c4195.png]: https://img-blog.csdnimg.cn/d4557b84f7c940c69daab840808c4195.png
[55314835f5354fdbb5a576f0b867c97b.png]: https://img-blog.csdnimg.cn/55314835f5354fdbb5a576f0b867c97b.png
[cf616d0741914f2e8993ba54857a3937.png]: https://img-blog.csdnimg.cn/cf616d0741914f2e8993ba54857a3937.png