macos终端外网连接服务器、接口请求的回调另一种方法、vue3中的computed与watch

• macos终端外网发服务器

之前说过macos发布打包的vue文件到服务器，当时用的是公司内网。那么用外网，该怎么办呢？

也很简单，基本流程都是一样的，只有一个地方需要变一下，就是用scp传文件时，命令需要加几个。外网访问大多都是有端口的，所以在传时，需要把端口带上，具体是这样：

scp -r -P端口号 ./文件名.后缀 xxxx@123.456.1.1:对应路径

• 接口请求的回调另一种方法

之前我调取接口时，总是用如下这种方式：

api.getList().then(res => {
  console.log(res)
})

现在学到一个新的回调方式，会更好点，代码执行顺序看起来会更清晰些：

async onGetList() {
   let res = await api.getList();
   console.log(res)
}

• vue3中的computed与watch

computed

1)接受一个getter函数，根据getter的返回值返回一个不可变的响应式ref对象

const count = ref(1);
const dep_count = computed(() => {
    return count.value + 1;
})

2)接受一个包含get和set函数的对象，用来创建一个可写的ref对象

const count = ref(1);
 
const dep_count = computed({
    get: () => count.value + 1,
    set: () => val => {
        count.value = val * 10
    }
})
 
dep_count.value = 5
 
console.log(count.value) //50

watch

let count = ref(1);
let message = ref('你好');
let worker = reactive({
    name: '小二',
    salary: '10K',
    job: {
           job1 : {
              positon: '普通职员'
           } 
         }
 })

1)监听ref创建的单个响应式数据

watch(count, (newValue, oldValue) => {
      console.log('count变化了', newValue, oldValue);
});

2)监听ref创建的多个响应式数据,newValue和oldValue也是Array

watch([count, message], (newValue, oldValue) => {
    console.log('count或message变化了', newValue, oldValue)
},{immediate: true, deep: true})

3)监听reactive创建的响应式数据的全部属性

注意：1.无法正确获取到oldValue 2.强制开启深度监听

watch(worker, (newValue, oldValue) => {
    console.log('worker变化了', newValue, oldValue)
})

4）监听reactive创建的响应式数据的单个属性

watch(
   () => worker.name,
   (newValue, oldValue) => {
       console.log('worker中的name属性发生变化了', newValue, oldValue)
    }
)

特殊情况

watch(worker.job, (newValue, oldValue) => {
   console.log('worker中的job属性发生变化了', newValue, oldValue)
},{deep: true})

5）监听reactive创建的响应式数据的多个属性

watch(
    [
       () => worker.name,
       () => worker.salary,
    ],
    (newValue, oldValue) => {
       console.log('worker中的name或者salary属性发生变化了', newValue, oldValue)
    }
)