vue2 操作data数据更新的正确方式

66 阅读1分钟

基本类型

数值(数字):Number

涉及到的 任何关于NaN的操作,都会返回NaN
NaN不等于自身。
注意 NaN不是一个数值,但他是number类型

类型转化

nullnumber: 结果为 0 ; Number(null)// 0
Undefinednumber: 结果为NaN;
布尔 转 number 结果: 
console.log(Number(ture)) //1  
console.log(Number(false)) //0
空字符串 转 number 结果 
console.log(Number(' ')) //0

var arr2 = '12.31.54';
console.log(Number(arr2)); //NaN
var arr3 = '123nx';
console.log(Number(arr3)); //NaN
var arr4 = '你好';
console.log(Number(arr4)); //NaN
'注意:数字前面有零的就省率0'
var arr5 = '012138';
console.log(Number(arr5)); //12138  

**parseInt()取整**
var a = '123';
console.log(parseInt(a)); //123
var b = '13.14';
console.log(parseInt(b));//12
var c = '12.31.14';
console.log(parseInt(c)); //12
var d = '你好';
console.log(parseInt(d)); //NaN
var e = 'w123';
console.log(parseInt(e)); //NaN
var r = '123w';
console.log(parseInt(r)); //123 

**parseFloat()取浮点数**
var a = '123';
console.log(parseFloat(a)); //123
var b = '12.12';
console.log(parseFloat(b)); //12.12
var c = '12.31.14';
console.log(parseFloat(c));//12.31
var d = '你好';
console.log(parseFloat(d)); //NaN
var e = 'w12.31'
console.log(parseFloat(e));// NaN
var r = '12.31w';
console.log(parseFloat(r));//12.31 

**isNaN() 检测是否是非数字**
console.1og (isNaN(123)) ://false
console.1og (isNaN("123a")) ://true
console. log (isNaN(true)) ://false

**+号转整型**
let a = '123'
+a = 123
let a = '123a'
+a = NaN
let a = undefined
+a = NaN
let a = null
+a = 0

字符串:String 类型转化任意转

命名未赋值:Undefined

布尔类型:Boolean

转化 
Boolean() !!

空类型:Null

判断类型

引用数据类型

对象类型

修改值
let d = {
    a:1,
    b:2
}
this.$set(d,'a',2)
d.a = 2
监听
watch:{
    'd.a'(n,o){
    },
    'd.b':{
        handler (n, o) {},
        deep: true
    }
}

数组类型

修改值
let arr =  [
    {
        a:1
    },
     {
        a:2
    }
]
push()函数,向数组尾部添加元素
pop()函,从数组尾部删除元素

unshift()函数,向数组头部添加元素
shift()函数,从数组头部删除元素
 
splice(arr,index,1)

sort() 
reverse()

this.$set(this.arr,index,newData) // Vue.set()
this.$set(this.arr[index],a,1) // Vue.set()
以上会改变源数据
以下不会,会返回新数组
filter()
concat()
slice()

监听
watch:{
    'd.0.a'(n,o){
    }
}

## 数据对比
set数组之前先深拷贝
深拷贝用 lodash

import lodash from 'lodash'
lodash.cloneDeep(data)

import debounce from 'lodash/debounce' //防抖
import throttle from 'lodash/throttle' //节流

 @change="debounceGetInfo()"
 
 debounceGetInfo: debounce(function() {
      this.getInfo()
      // throttle debounce
    }, 500),
    
    
 data() {
    this.lastFetchId = 0
    this.fetchUser = debounce(this.fetchUser, 800)
 }
 
 fetchUser(value) {
      let params = { current: 1, fuzzy: value, size: 999 }
      this.lastFetchId += 1
      const fetchId = this.lastFetchId
      this.data = []
      this.fetching = true
      onLineEndApi
        .employeePage(params)
        .then((res) => {
          console.log(res, 11)
          if (fetchId !== this.lastFetchId) {
            return
          }
          const data =
            (res &&
              res.data &&
              res.data.records.map((user) => ({
                text: `${user.employeeName}<${user.email}>`,
                value: user.employeeCode,
                employeeCode: user.employeeCode,
                name: user.employeeName,
                email: user.email,
              }))) ||
            []

          this.receiverData = data
          this.allSearchList = this.allSearchList.concat(this.receiverData)
          this.fetching = false
          console.log(this.receiverData, 11)
        })
        .catch((err) => {
          this.fetching = false
        })
    },

数组更新父子组件

view页面 表格数据源为 dataSource

watch: {
    dataSource: {
      deep: true,
      immediate: true,
      handler(curr, old) {
        if (curr) {
          curr.map((v, i) => {
            this.$emit('changeTable', this.dataSource) // 父组件接收值
          })
        }
      },
    },
  },
  data() {
    
    return {
      TableInfo,
      dataSource: lodash.cloneDeep(this.array), //初始化数据父传来的,设置v-if 父表拿到数据再渲染子组件
       
    }
  },