vue中使用的迭代方法

map(回调函数)
filter(回调函数)
forEach(回调函数)
some(回调函数)
every(回调函数)
findLndex(回调函数)
find(回调函数)
reduce(回调函数，初始值)
includes('检测的值')
indexOf('检测的值')

Vue生命周期

beforeCreate为(创建前)

created( 创建后 )

beforeMount( 挂载前)

Mounted( 挂载后)

beforeUpdate(更新前)

updated（更新后）

beforeDestroy（销毁前）

destroyed(销毁后)

(errorCaptured(铺货来自子孙组件错误是被调用会收到三个参数错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播 ))

getCurrentInstance(v3)

import { getCurrentInstance } from 'vue'
export default ({
  name: '',
  setup(){
    const { proxy } = getCurrentInstance() // 使用proxy代替ctx，因为ctx只在开发环境有效
	onMounted(() => {
      console.log(proxy, "proxy");
      proxy.http();
    });
  }
})

scss的使用

安装： cnpm i -S node-sass sass-loader

### 使用$声明变量（代码块）

//同一个变量赋值,会代替先赋值的变量
<template>
	<div class="main">main</div>
</template>
<style lang="scss" scoped>
     $bose-color:#ccc
     $bose-color:red
      .main{
         color:$bose-color
      }
</style>
             //-------------

//可以在变量的结尾添加!default 给一个未通过!default声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值
<style lang="scss" scoped>
     $bose-color:#ccc
     $bose-color:red !default
      .main{
         color:$bose-color
      }
</style>

           //-------------
//变量嵌套在字符串中，就需要写在#{}
<style lang="scss" scoped>
     $side:bottom
      .main{
         color:red;
         border-#{$side}:2px solid #ccc
      }
</style>
           //-------------
//继承 @extend,sass允许一个选择器继承另外一个
.main{
  @extend .class1
   color:red;
    }
.class1{
  background:#ccc
}
           //-------------
//Mixin是可以重用的代码块。使用@mixin命令，定义一个代码块，使用@include命令，调用这个mixin。

@mixin myCss{
color:red;
background:#ccc
}
.main{
@include myCss
font-size:30px
}
//指定参数
@mixin myCss{
color:$myColor;
background:yellow
}
.main{
@include myCss(red)
font-size:30px
}

//指定多个参数使用(参数会按照顺序依次赋值)
@mixin myCss($myColor:blue,$myBackgroundColor:green){
color:$myColor;
background:$myBackgroundColor
}
.main{
@include myCss(red,green)
font-size:30px
}

外部引入文件

@import

scss传送门:www.sass.hk/guide/

Vue3特性

<template>
  <div class="list">
    <div>{{ name }}</div>  
    <div>obj</div>  
    <div>{{ obj.name }}</div>
    <div>{{ obj.age }}</div>
  </div>
</template>
<script setup>
import { ref, reactive, watch, computed } from "vue";
let name = ref("ko");
watch(name, (curVal, preVal) => {
  console.log(curVal, preVal);
});
setTimeout(() => {
  name.value = "改变的值1";
}, 1000);
let obj = reactive({
  name: "yess",
  age: 18,
});
let newObj = computed(() => JSON.parse(JSON.stringify(obj)));
setTimeout(() => {
  obj.name = "改变的值";
}, 1000);
// 监听返回的值是一个数组，如果被监听的值不同的地方触发，
// 每一次都会被这个watch监听到
watch(
  [() => obj.name, () => obj.age],
  (curVal, preVal) => {
    console.log("监听对象某一个属性", curVal, preVal);
  },
  { immediate: true },
  newObj,
  (curVal, preVal) => {
    console.log("obj", curVal, preVal);
  },
  { deep: true }
);
</script>
<style lang="scss"></style>

vue基础使用