watchEffect

发表于 2022-01-30 分类于 Vue

watch和watchEffect区别：

watch:既要指明监视的属性，也要指明监视的回调

watchEffect:不用指明监视哪个属性，监视的回调中用到哪个属性就监视哪个属性

watchEffect有点像computed:

但computed注重的是计算出来的值即回调函数的返回值，所以必须要写返回值

而watch注重的是过程即回调函数的函数体，所以不用写返回值

//watchEffect指定的回调函数中用到的数据只要发生变化，则直接重新执行回调
		let sum=ref(1)
        let msg=ref("你好呀")
         watchEffect(()=>{
            const x1=sum.value
            const x2=person.firstName
            console.log('watchEffect的回调被调用了',x1,x2)
        })

二分查找

发表于 2022-01-30 分类于算法

大家写二分法经常写乱，主要是因为对区间的定义没有想清楚，区间的定义就是不变量。要在二分查找的过程中，保持不变量，就是在while寻找中每一次边界的处理都要坚持根据区间的定义来操作，这就是循环不变量规则。

写二分法，区间的定义一般为两种，左闭右闭即[left, right]，或者左闭右开即[left, right)。

下面我用这两种区间的定义分别讲解两种不同的二分写法。

二分法第一种写法

第一种写法，我们定义 target 是在一个在左闭右闭的区间里，也就是[left, right] （这个很重要非常重要）。

区间的定义这就决定了二分法的代码应该如何写，因为定义target在[left, right]区间，所以有如下两点：

while (left <= right) 要使用 <= ，因为left == right是有意义的，所以使用 <=

if (nums[middle] > target) right 要赋值为 middle - 1，因为当前这个nums[middle]一定不是target，那么接下来要查找的左区间结束下标位置就是 middle - 1

// 版本一
class Solution {
public:
    int search(vector<int>& nums, int target) {
        int left = 0;
        int right = nums.size() - 1; // 定义target在左闭右闭的区间里，[left, right]
        while (left <= right) { // 当left==right，区间[left, right]依然有效，所以用 <=
            int middle = left + ((right - left) / 2);// 防止溢出 等同于(left + right)/2
            if (nums[middle] > target) {
                right = middle - 1; // target 在左区间，所以[left, middle - 1]
            } else if (nums[middle] < target) {
                left = middle + 1; // target 在右区间，所以[middle + 1, right]
            } else { // nums[middle] == target
                return middle; // 数组中找到目标值，直接返回下标
            }
        }
        // 未找到目标值
        return -1;
    }
};

二分法第二种写法

如果说定义 target 是在一个在左闭右开的区间里，也就是[left, right) ，那么二分法的边界处理方式则截然不同。

有如下两点：

while (left < right)，这里使用 < ,因为left == right在区间[left, right)是没有意义的
if (nums[middle] > target) right 更新为 middle，因为当前nums[middle]不等于target，去左区间继续寻找，而寻找区间是左闭右开区间，所以right更新为middle，即：下一个查询区间不会去比较nums[middle]

// 版本二
class Solution {
public:
    int search(vector<int>& nums, int target) {
        int left = 0;
        int right = nums.size(); // 定义target在左闭右开的区间里，即：[left, right)
        while (left < right) { // 因为left == right的时候，在[left, right)是无效的空间，所以使用 <
            int middle = left + ((right - left) >> 1);
            if (nums[middle] > target) {
                right = middle; // target 在左区间，在[left, middle)中
            } else if (nums[middle] < target) {
                left = middle + 1; // target 在右区间，在[middle + 1, right)中
            } else { // nums[middle] == target
                return middle; // 数组中找到目标值，直接返回下标
            }
        }
        // 未找到目标值
        return -1;
    }
};

插槽

发表于 2022-01-29 更新于 2022-09-16 分类于 Vue

1 作用：

让父组件可以向子组件指定位置插入html结构，是一种组件间的通信方式，适用于父组件=>子组件

2 使用方式

（1）默认插槽

父组件：
	<Category>
        <div>
            html结构
        </div>
	</Category>
子组件：
	<template>
		<div>
            <slot>插槽默认内容</slot>
        </div>
	</template>

2 具名插槽

父组件：
	<Category>
         <template #header>
			<div>
                html结构
            </div>
        </template>
        <template slot="center">
			<div>
                html结构
            </div>
        </template>
        <template v-slot:footer>
			<div>
                html结构
            </div>

        </template>
	</Category>
子组件：
	<template>
		<div>
            <slot name="center">插槽默认内容</slot>
            <slot name="footer">插槽默认内容</slot>
        </div>
	</template>

3 作用域插槽

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者决定，(games数据在Category组件中，但使用数据所遍历的结构由App组件决定)

父组件：
<Category title="游戏">
    <template v-slot="{games}">
         <ul>
        <li v-for="(game,index) in games" :key="index">
            {{game}}
        </li>
    </ul>     
    </template>
</Category>
<Category title="游戏">
    <template v-slot="{games}">
         <ol>
        <li v-for="(game,index) in games" :key="index">
            {{game}}
        </li>
    </ol>     
    </template>
</Category>
子组件：
<template>
<div>
    <h3>{{title}}分类</h3>
    <slot :games="games"></slot>
</div>
  
</template>

<script>
import {reactive} from "vue"
export default {
    name:'Category',
    props:['title'],
    setup(){
        let games=reactive(['红色警戒','超级玛丽','穿越火线','魂斗罗'])
        return{
            games
        }
        
    }

}
</script>

ref函数

发表于 2022-01-27 更新于 2022-02-01 分类于 Vue

ref函数：

作用：定义一个响应式函数

语法：const xxx=ref(initValue)

创建一个包含响应式数据的引用对象（reference对象，简称ref对象)

JS中操作数据：xxx.value

模板中读取数据，不需要.value,直接

Ps:

接收的数据类型可以是：基本类型也可以是对象类型

基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成

对象基本类型的数据：内部是求助了Vue3中的一个新函数——reactive函数

ref与reactive对比：

定义数据角度：

ref用来定义：基本类型数据

reactive用来定义：对象（或数组类型数据）

PS：ref也可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象

从原理角度对比：

ref通过Object.defineProperty()的getter和setter来实现响应式（数据劫持）

reactive通过使用Proxy来实现响应式，并通过Reflect操作源对象内部的数据

使用角度对比：

ref定义的数据，操作数据需要通过.value,读取数据时模板直接读取不需要.value

reactive定义的数据操作数据与读取数据均不需要.value

响应式数据的判断

isRef:检查一个值是否为一个ref对象

isReactive:检查一个对象是否由reactive创建的响应式代理

isReadonly:检查一个对象是否由readonly创建的只读代理

isProxy:检查一个对象是否由reactive或者readonly方法创建的代理

props

发表于 2022-01-27 分类于 Vue

配置项:props

功能：让组件接收外部传来的数据

（1）传递数据：

第一种方式（只接收）：props:[‘name’]

第二种方式（限制类型）：props:{name:String}

第三种方式（限制类型，限制必要性，指定默认值）：

props:{

name:{

type:String,//类型

required:true,//必要性

dedault:’老王’//默认值

}

Ps:props是只读的，vue底层会监视你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后修改data中的数

eg:data(){

return{

myName:this.myName

}

生命周期钩子

发表于 2022-01-26 更新于 2022-05-15 分类于 Vue

beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeUnmount,unmounted

常用生命周期钩子:

mounted:发送ajax请求，启动定时器，绑定自定义事件，订阅消息等【初始化操作】

beforeUnmount:清除定时器，解绑自定义事件，取消订阅消息等【收尾工作】

关于销毁实例：

1 销毁后借助Vue开发者工具看不到任何信息

2 销毁后自定义事件失效，但原生DOM事件依然有效

3 一般不会在beforeUnmount操作数据，因为即使操作数据，也不会触发更新流程了

自定义指令

发表于 2022-01-25 分类于 Vue

自定义指令

1.语法：

（1）局部指令：

directives:{指令名：配置对象}或 directives：{指令名:回调函数}

（2）全局指令：

Vue.directive(指令名，配置对象)或Vue.directive(指令名，回调函数)

2.配置对象中常用的回调

created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时，这很有用。`

beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。mounted：指令与元素成功绑定时使用

updated:在包含组件的 VNode 及其子组件的 VNode 更新后调用。

beforeUpdate：在更新包含组件的 VNode 之前调用。

beforeUnmount：在卸载绑定元素的父组件之前调用

unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

PS:指令定义时不加v-,，但是使用时要加v-

指令名如果是多个单词要用kebab-case命名方式，不要用camelCase命名

 <div id="root">
        <h3>{{name}}</h3>
        <h3>当前n:<span v-text="n">{{n}}</span></h3>
        <h3>放大10倍后的n：<span v-big="n">{{n}}</span></h3>
        <button @click="n++">点我n+1</button>
        <br>
        <input type="text" v-fbind:value="n">
 </div>
<script src="https://unpkg.com/vue@next"></script>
    <script>
        Vue.createApp({
            data(){
                return{
                    name:"ann",
                    n:1
                }
            },
            directives: {
                //v-big被调用：指令与元素成功绑定时（一上来） 指令所在模板重新编译时
                big(element,binding){
                   element.innerText=binding.value*10
                   
                },
               /*fbind(element,binding){
                    element.value=binding.value
                    element.focus()
                },*/
               fbind:{
                   // 当被绑定的元素挂载到 DOM 中时……
                    mounted(element,binding){
                        console.log(this)
                        element.value=binding.value
                        element.focus()

                    },
                    updated(element,binding){
                        element.value=binding.value

                    }

                }
                

            }
        }).mount("#root")

    </script>

内置指令

发表于 2022-01-25 分类于 Vue

v-html:

1 作用：向指定节点中渲染包含html的内容

2 与插值语法的区别：

（1）v-html会替换掉节点中所有内容，则不会

（2）v-html可以识别html结构

3 严重注意：v-html有安全性问题

（1）在网站上动态渲染任意HTML非常危险，容易导致XSS攻击

（2）一定要在可信内容上使用v-html，永远不要用在用户提交的内容上

v-cloak(没有值)

1 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性

2 使用css配合一个v-clock可以解决网速慢时页面展示出的问题

<style>
        [v-cloak]{
            display:none
        }
</style>
 <h2 v-cloak>{{name}}</h2>
    <div>
        <script></script>//延迟5秒的服务器
    </div>
    <script>
        Vue.createApp({
            data(){
                return{
                    name:'Ann'
                }
            }
        })
    </script>

v-once:

v-once 节点在初次动态渲染后，就被视为静态内容
以后数据改变不会引起v-once所在结构的更新，可以用于优化性能

v-pre:

1.跳过其所在节点的编译过程

2.可利用它跳过没有使用指令语法，插值语法的节点，加快编译

收集表单数据

发表于 2022-01-25 分类于 Vue

收集表单数据：

,v-model收集的死是value值，用户输入的是value值

,v-model收集的是value值，且给标签配置value值

(1）没有配置input的value属性，收集的是checked(true/false)

(2)配置input的value属性：

若v-model的初始值是非数组，收集的是checked(true/false)

若v-model的初始值是数组，收集的是value组成的数组

PS：

v-model有三个修饰符：

lazy:失去焦点再收集数据

number:把输入的字符串转为有效数字

trim: 输入首尾空格过滤

Node.js基础

发表于 2022-01-24 更新于 2022-04-12 分类于 Node

Node.js运行时结构：

1 异步IO

当Node.js执行I/O操作时，会在响应返回后恢复操作，而不是阻止线程并占用额外内存等待

2 单线程

实际JS线程+uv线程池+V8任务线程池+V8inspector线程

优点：不用考虑多线程同步问题，也就不需要锁，同时还能比较高效的利用系统资源

缺点：阻塞会产生负面影响，解决方法：多进程或多线程

3 跨平台

Node.js跨平台+JS无需编译环境（Web跨平台，诊断工具跨平台）

watch和watchEffect区别：

二分法第一种写法

二分法第二种写法

ref函数：

ref与reactive对比：

定义数据角度：

从原理角度对比：

使用角度对比：

响应式数据的判断

常用生命周期钩子:

自定义指令

1.语法：

（1） 局部指令：

（2）全局指令：

2.配置对象中常用的回调

v-html:

v-cloak(没有值)

v-once:

v-pre:

（1）局部指令：